CSS
Kształty dla pływaków
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
Wyjście bez shape-outside
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:
