A CSS dobozon kívüli modellen alapul. Ha van olyan képe, amely kör, amelyet szöveget akar körbefuttatni, akkor körbetekeri a képek határoló mezőjét.
Alak-kívül
A shape-outside nevű új CSS tulajdonság segítségével szöveget tekerhet, amely megfelel a kép alakjának.
Mi a forma-kint
A Shape-outside egy új CSS tulajdonság, amely megváltoztatja a becsomagolt elemek alakját. Ahelyett, hogy a kép körül egy téglalap alakú határoló dobozra korlátozódna, a shape-outside lehetővé teszi számunkra, hogy a tartalmat a képhez igazítsuk.
Így írja le az MDN az alak külső formáját:
Az alakzaton kívüli CSS tulajdonság alakértékekkel határozza meg az úszó úszó területét, és az inline tartalom körbefutja az alakot az úszó határoló doboza helyett.A leírás legfontosabb levonása, hogy ez az új tulajdonság úszót használó képekre vonatkozik. A CSS alakon kívüli tulajdonság szabályozza, hogy a szöveg hogyan tekerje át az összes lebegő képet. A becsomagolt szöveg kör, ellipszis, téglalap vagy sokszög alakú lehet.
Alak-külső használata
Az alak-külső tulajdonság „alapformát” vesz fel, és alakfüggvényt alkalmaz rá. Az alak függvény az alakzat úszó területének alakjának megváltoztatására szolgál. A CSS alakon kívüli tulajdonság a következő alakfunkciók létrehozásához nyújt funkcionalitást:
- kör
- ellipszis
- poligon
- téglalap
- url
A kép ezekkel az értékekkel pozicionálható. Az értékek a végéhez vannak csatolva:
- margin-box
- párnázó doboz
- határdoboz
A képnek belső méretben kell lennie. Be kell állítania az elem magasságát és szélességét. Ezt az alak függvény fogja használni egy olyan koordináta-rendszer létrehozására, amelyet a szöveg körbefogásakor használnak a kép köré.
Kör
A Circle () egyike az alak-kívül kapott funkcionális értékeknek. A kör () teljes jelölése kör (r at cx cy), ahol r a kör sugara, cx és cy pedig a kör középpontjának koordinátái. Ha ezeket kihagyja, akkor a kép közepe lesz az alapértelmezett érték.
Íme egy példa az alak-kívül használatára egy körön:
.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}Ellipszis
Az ellipszis annak a körnek a változata, ahol az elem a vízszintes vagy függőleges tengelyen megnyúlt. Az ellipszis () teljes jelölése ellipszis (rx ry a cx cy-nél), ahol rx és ry az ellipszis sugara, cx és cy pedig az ellipszis középpontjának koordinátái.
Íme egy példa a shape-outside használatára az ellipszison:
.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}Poligon
A sokszög funkció korlátlan formaválasztékot biztosít. A sokszög () teljes jelölése sokszög (x1 y1, x2 y2,…)ahol minden pár meghatározza a sokszög csúcsának xy koordinátáit. A sokszög () függvény használatához meg kell adnia legalább 3 pár csúcsot.
A sokszöget klip-útvonallal együtt használják. A clip-path CSS tulajdonság létrehoz egy vágási régiót, amely meghatározza, hogy egy elem mely részének jelenjen meg. A régióban bármi megjelenik, míg a kívüliek rejtve vannak.
Íme egy példa a shape-outside használatára két háromszög alakú alakzat létrehozására, és a szöveg ezek között folyik:
.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}Böngésző támogatás
A CSS shape-outside-t elsősorban a Chrome, az Opera és a Safari támogatja.
Szerezd meg a kódot
Az összes példa kódja itt található a github repóban.
További cikkek
Köszönöm, hogy elolvastad a cikkemet. Ha tetszik, kattintson az alábbi taps ikonra, hogy mások is megtalálják a cikket. Íme néhány további cikkem, amelyek érdekelhetnek:
Itt van 5 elrendezés, amelyet a FlexBox segítségével készíthet
Szélesség Első keresés a JavaScript-ben
Instantációs minták a JavaScript-ben