Szukaj…


Składnia

  • kształt zewnętrzny: brak | [<podstawowy>> <shape-box>] | <image>

  • margines kształtu: <długość> | <procent>

  • kształt-obraz-próg: <liczba>

Parametry

Parametr Detale
Żaden Wartość none oznacza, że obszar zmiennoprzecinkowy (obszar używany do zawijania zawartości wokół elementu zmiennoprzecinkowego) pozostaje nienaruszony. Jest to wartość domyślna / początkowa.
podstawowy kształt Odnosi się do jednego spośród inset() , circle() , ellipse() lub polygon() . Za pomocą jednej z tych funkcji i jej wartości określa się kształt.
pudełko w kształcie Odnosi się do jednego spośród margin-box , border-box , padding-box , content-box . Gdy podany jest tylko <shape-box> (bez <baseic-shape>), to pole ma kształt. Kiedy jest używany razem z <basic-shape>, działa to jako pole odniesienia.
wizerunek Gdy obraz jest podany jako wartość, kształt jest obliczany na podstawie kanału alfa określonego obrazu.

Uwagi

Obsługa przeglądarki dla modułu CSS Shapes jest w tej chwili bardzo ograniczona.

Jest obsługiwany w Chrome v37 + i Opera 24+ bez prefiksów przeglądarki / dostawcy. Safari obsługuje go od wersji 7.1 +, ale z prefiksem -webkit- .

Nie jest jeszcze obsługiwany w IE, Edge i Firefox.

Kształt na zewnątrz o kształcie podstawowym - koło ()

Za pomocą właściwości CSS shape-outside można zdefiniować wartości kształtu dla obszaru zmiennoprzecinkowego, aby zawartość wstawiana była owijana wokół kształtu zamiast pola zmiennoprzecinkowego.

CSS

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

W powyższym przykładzie oba obrazy są w rzeczywistości obrazami kwadratowymi, a gdy tekst zostanie umieszczony bez właściwości shape-outside , nie będzie płynął wokół koła po obu stronach. Będzie krążyć tylko wokół zawierającego pole obrazu. W przypadku shape-outside obszar zmiennoprzecinkowy jest ponownie definiowany jako okrąg, a treść przepływa wokół tego wyimaginowanego koła utworzonego za pomocą shape-outside .

Wyimaginowany okrąg, który służy do ponownego zdefiniowania obszaru zmiennoprzecinkowego, jest okręgiem o promieniu 80px narysowanym od środka do środka pola odniesienia obrazu.

Poniżej znajduje się kilka zrzutów ekranu ilustrujących, w jaki sposób treść zostanie zawinięta, gdy używany jest shape-outside a kiedy nie jest używany.

Wyjście o shape-outside

wprowadź opis zdjęcia tutaj

Wyjście bez shape-outside

wprowadź opis zdjęcia tutaj

Margines kształtu

shape-margin właściwość CSS dodaje margines do shape-outside .

CSS

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

W tym przykładzie margines 10 pikseli jest dodawany wokół kształtu za pomocą shape-margin . To tworzy nieco więcej przestrzeni między wyobrażonym okręgiem, który określa obszar pływający, a rzeczywistą treścią, która płynie wokół.

Wynik:

wprowadź opis zdjęcia tutaj



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow