Alak-külső - CSS-trükkök

Anonim

A shape-outsidetulajdonság szabályozza, hogy a tartalom hogyan fog körbefutni egy lebegő elem határoló dobozán. Általában ez azért van, hogy a szöveg visszavezessen egy alakra, például körre, ellipszisre vagy sokszögre:

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

Fontos megjegyezni, hogy ez a tulajdonság egyelőre csak lebegő elemeken fog működni, bár ez a jövőben valószínűleg megváltozik. A shape-outsidetulajdonság átmenetekkel vagy animációkkal is manipulálható.

Értékek

  • circle(): kör alakú alakzatok készítéséhez.
  • ellipse(): elliptikus alakzatok készítéséhez.
  • inset(): téglalap alakú alakzatok készítéséhez.
  • polygon(): bármilyen alakzat létrehozásához 3 vagy több csúccsal.
  • url(): meghatározza, melyik képet kell használni a szöveg körbefuttatásához.
  • initial: az úszó terület nincs érintve.
  • inherit: shape-outsideértéket örököl a szülőtől.

A következő értékek meghatározzák, hogy a dobozmodell melyik hivatkozását kell használni az alak elhelyezéséhez:

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

Ezeket az értékeket kell végéhez, például: shape-outside: circle(50% at 0 0) padding-box. Alapértelmezés szerint a margin-boxhivatkozást kell használni.

ellipszis()

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

A ellipse()funkció megköveteli az ellipszis x, y tengelyének sugárértékeit, amelyet a koordináták követnek, hogy az alak közepét a határoló dobozában elhelyezzék. Például a fenti példa az ellipszis közepét a .elementdiv függőleges és vízszintes középpontjában helyezi el :

Bár a fenti bemutató azt sugallhatja, hogy megváltoztatjuk divönmagának alakját , ha szegélyeket és háttérképet adunk hozzá, azt találjuk, hogy a határoló doboz valójában még mindig téglalap alakú:

Jobb lehet erre gondolni: a shape-outsidetulajdonsággal megváltoztatjuk a többi elem viszonyát egy elem körül, nem pedig az elem geometriáját. Ennek kijavításához shape-outsidea clip-path()tulajdon mellett kell használnunk , például ebben a példában:

kör()

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

Ez a függvény létrehoz egy kört, és a fenti kódpéldában létrehoz egy kört, amelynek sugara a magassága és szélessége fele .element. A circle()függvény ugyanazt a szintaxist is felhasználhatja az alakzat belüli elhelyezésére.

URL ()

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

Ebben az esetben két lebegő képünk van, az egyik a szövegblokk mindkét oldalán. Mivel mindkét képnek meg van shape-outsideadva a tulajdonság, akkor az alatta lévő szöveg elkerüli ezt a két lebegést.

Beállítható az a shape-image-thresholdtulajdonság is, amely tájékoztatja a böngészőt arról, hogy az áttetszőségtől függően melyik pixelek hozzák létre az alakzatot. Például:

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

Ebben a példában csak az alakot létrehozó képpontoknak 50% -osnak és nagyobbnak kell lenniük. Az 0.0(átlátszó) - 1.0(átlátszatlan) értékek érvényesek.

poligon()

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

Ez a függvény bármilyen alakzatot hoz létre, amelynek három vagy több csúcsa van, például:

Fontos megjegyezni, hogy ha ezt a tulajdonságot animálni akarják, akkor ugyanannyi csúcsra van szükség az animált állapot deklarálásakor:

.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%); )

betét ()

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

inset()téglalap alakú alakzatok készítésének függvénye, öt paramétert vesz fel, de az ötödik, mert border-radiusopcionális. A többi érv a következő szélétől befelé tolódik .element:

Fent van egy 200px széles és 200px magas elem, és a bal oldalon kívül minden irányban 50px-re ellensúlyozzuk az alakot. Így a szöveg az alakzat fölé kerül, annak ellenére, hogy a div felfelé nyúlik.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
37 62 Nem 79 7,1 *

Mobil / Tablet

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