CSS
Formar för flottörer
Sök…
Syntax
form utanför: ingen | [<basisk-form> || <shape-box>] | <Image>
form-marginal: <längd> | <Procentandel>
form-bild-tröskel: <nummer>
parametrar
| Parameter | detaljer |
|---|---|
| ingen | Ett värde på none betyder att flottörområdet (det område som används för att linda innehåll runt ett flottörelement) påverkas inte. Detta är standard / initialvärde. |
| basic-form | Avser en bland inset() , circle() , ellipse() eller polygon() . Med hjälp av en av dessa funktioner och dess värden definieras formen. |
| form-box | Avser en bland margin-box , border-box , padding-box , content-box . När endast <formlåda> tillhandahålls (utan <grund-form>) denna box är formen. När det används tillsammans med <basisk-form>, fungerar det som referensrutan. |
| bild | När en bild tillhandahålls som värde beräknas formen baserat på alfakanalen för den angivna bilden. |
Anmärkningar
Webbläsarsupport för CSS Shapes-modulen är mycket begränsat vid denna tidpunkt.
Det stöds i Chrome v37 + och Opera 24+ utan prefix för webbläsare / leverantör. Safari stöder det från v7.1 + men med -webkit- prefixet.
Det stöds ännu inte i IE, Edge och Firefox.
Form utanför med grundform - cirkel ()
Med shape-outside CSS-egenskapen kan man definiera formvärden för flottörområdet så att inlineinnehållet lindas runt formen istället för flottörens ruta.
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>
I exemplet ovan är båda bilderna faktiskt fyrkantiga bilder och när texten placeras utan shape-outside egenskapen kommer den inte att flyta runt cirkeln på någon sida. Det kommer endast att flyta runt den innehållande bildrutan. Med shape-outside definieras flottörområdet som en cirkel och innehållet görs att flyta runt denna imaginära cirkel som skapas med shape-outside .
Den imaginära cirkeln som används för att definiera flottörområdet är en cirkel med en radie på 80px som dras från mitt-mittpunkten i bildens referensruta.
Nedan finns ett par skärmdumpar för att illustrera hur innehållet skulle lindas när shape-outside används och när det inte används.
Utgång med shape-outside
Utgång utan shape-outside
Formmarginal
shape-margin CSS-egenskapen lägger till en marginal till 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>
I det här exemplet läggs en marginal på 10 pixlar runt formen med hjälp shape-margin . Detta skapar lite mer utrymme mellan den imaginära cirkeln som definierar flottörområdet och det faktiska innehållet som flyter runt.
Produktion:
