Kształt zewnętrzny - CSS-Tricks

Anonim

Te shape-outsidekontrole własności jak treść będzie owinąć dookoła obwiedni danej płynął elementu. Zwykle dzieje się tak, aby tekst mógł ponownie wpłynąć na kształt, taki jak okrąg, elipsa lub wielokąt:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Należy zauważyć, że ta właściwość będzie na razie działać tylko na elementach pływających, chociaż prawdopodobnie ulegnie to zmianie w przyszłości. shape-outsideNieruchomość można również manipulować z przejściami i animacjami.

Wartości

  • circle(): do wykonywania okrągłych kształtów.
  • ellipse(): do wykonywania kształtów eliptycznych.
  • inset(): do wykonywania prostokątnych kształtów.
  • polygon(): do tworzenia dowolnego kształtu z 3 lub więcej wierzchołkami.
  • url(): określa, który obraz powinien zostać użyty do zawijania tekstu.
  • initial: obszar pływaka pozostaje niezmieniony.
  • inherit: dziedziczy shape-outsidewartość po rodzicu.

Poniższe wartości określają, które odniesienie do modelu pudełkowego powinno być użyte do umieszczenia kształtu w:

  • margin-box
  • padding-box
  • border-box

Wartości te należy dopisać na końcu, np shape-outside: circle(50% at 0 0) padding-box. : . Domyślnie margin-boxużywane będzie odniesienie.

elipsa()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

ellipse()Funkcja wymaga promieni wartości x, y oś elipsy, a następnie za pomocą współrzędnych do położenia środka kształtu na jego obwiedni. Na przykład powyższy przykład umieści środek elipsy w pionowym i poziomym środku .elementdiv:

Chociaż powyższe demo może sugerować, że zmieniamy kształt divsamego siebie, jeśli dodamy obramowanie i obraz tła, okaże się, że ramka ograniczająca jest w rzeczywistości prostokątna:

Lepiej byłoby pomyśleć o tym w ten sposób: za pomocą tej shape-outsidewłaściwości zmieniamy relacje innych elementów wokół elementu, a nie geometrię samego elementu. Aby to naprawić, będziemy musieli użyć shape-outsideobok clip-path()właściwości, tak jak w tym przykładzie:

okrąg()

.element ( shape-outside: circle(50%); )

Ta funkcja tworzy okrąg, aw powyższym przykładzie kodu utworzy okrąg o promieniu równym połowie wysokości i szerokości .element. circle()Funkcja może użyć tego samego położenia na składnie kształt wewnątrz.

url ()

.element ( shape-outside: url('circle.png.webp'); )

W tym przypadku mamy dwa pływające obrazy, po jednym po obu stronach bloku tekstu. Ponieważ oba obrazy mają shape-outsideustawioną właściwość, tekst poniżej będzie unikać tych dwóch elementów zmiennoprzecinkowych.

Można również ustawić shape-image-thresholdwłaściwość, która będzie informować przeglądarkę, które piksele, w zależności od ich przezroczystości, powinny tworzyć kształt. Na przykład:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

W tym przykładzie jedyne piksele, które utworzą kształt, muszą mieć 50% przezroczystości i więcej. Wartości od 0.0(przezroczysty) do 1.0(nieprzezroczysty) są prawidłowe.

wielokąt()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Ta funkcja tworzy dowolny kształt, który ma trzy lub więcej wierzchołków, na przykład:

Należy zauważyć, że jeśli ta właściwość ma być animowana, wymaga takiej samej liczby wierzchołków, gdy deklarujesz stan animacji:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

wstawka()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()jest funkcją do tworzenia prostokątnych kształtów, przyjmuje pięć parametrów, ale piąty border-radiusjest opcjonalny. Pozostałe argumenty to przesunięcia do wewnątrz od krawędzi .element:

Powyżej mamy element o szerokości 200 pikseli i wysokości 200 pikseli. Odsuwamy kształt w granicach do 50 pikseli w każdym kierunku z wyjątkiem lewej strony. W ten sposób tekst zostanie zawinięty nad kształtem, nawet jeśli element div rozciąga się do góry.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
37 62 Nie 79 7,1 *

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *