De shape-outsideControalele de proprietate modul în care conținutul se va încheia în jurul valorii de încadrare-box un element pluteau lui. De obicei, acest lucru este astfel încât textul să poată reveni peste o formă, cum ar fi un cerc, elipsă sau un poligon:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Este important să rețineți că această proprietate va funcționa doar pe elemente plutitoare pentru moment, deși este posibil ca aceasta să se schimbe în viitor. shape-outsideProprietatea poate fi , de asemenea , manipulate cu tranziții sau animații.
Valori
circle(): pentru realizarea de forme circulare.ellipse(): pentru realizarea de forme eliptice.inset(): pentru realizarea de forme dreptunghiulare.polygon(): pentru a crea orice formă cu 3 sau mai multe vârfuri.url(): identifică ce imagine trebuie utilizată pentru a înfășura textul.initial: zona plutitoare nu este afectată.inherit: moșteneșteshape-outsidevaloarea de la părinte.
Următoarele valori identifică referința modelului cutiei care trebuie utilizată pentru poziționarea formei în interior:
margin-boxpadding-boxborder-box
Aceste valori ar trebui să fie atașat la final, de exemplu: shape-outside: circle(50% at 0 0) padding-box. În mod implicit, margin-boxva fi utilizată referința.
elipsă()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Funcția necesită valorile razelor pentru x, axa y a elipsei urmat de coordonatele pentru a poziționa centrul formei în interiorul caseta de încadrare. De exemplu, exemplul de mai sus va poziționa centrul elipsei în centrul vertical și orizontal al .elementdivului:
Deși demonstrația de mai sus poate sugera că schimbăm forma divpropriu - zisă, dacă adăugăm margini și o imagine de fundal, vom descoperi că caseta de delimitare este de fapt încă dreptunghiulară:
Ar putea fi mai bine să ne gândim astfel: cu shape-outsideproprietatea schimbăm relația altor elemente din jurul unui element, nu geometria elementului în sine. Pentru a remedia acest lucru, va trebui să îl folosim shape-outsidealături de clip-path()proprietate, cum ar fi în acest exemplu:
cerc()
.element ( shape-outside: circle(50%); )Această funcție creează un cerc și, în exemplul de cod de mai sus, va crea un cerc cu o rază care este jumătate din înălțimea și lățimea lui .element. circle()Funcția se poate utiliza , de asemenea , aceeași sintaxă pentru poziționarea formei în interior.
url ()
.element ( shape-outside: url('circle.png.webp'); )În acest caz, avem două imagini plutitoare, una de fiecare parte a unui bloc de text. Deoarece ambele imagini au shape-outsideproprietatea setată, textul de dedesubt va evita acele două flotări.
De asemenea, este posibil să setați shape-image-thresholdproprietatea care va informa browserul ce pixeli, în funcție de transparența lor, ar trebui să creeze forma. De exemplu:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )În acest exemplu, singurii pixeli care vor crea forma trebuie să aibă 50% transparență sau mai mult. Valorile de la 0.0(transparent) la 1.0(opac) sunt valabile.
poligon()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Această funcție creează orice formă care are trei sau mai multe vârfuri, de exemplu:
Este important să rețineți că, dacă această proprietate va fi animată, este nevoie de același număr de vârfuri atunci când declarați starea animată:
.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%); )medalion()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()este o funcție pentru realizarea de forme dreptunghiulare, necesită cinci parametri, dar al cincilea, pentru border-radiuseste opțional. Celelalte argumente sunt compensate spre interior de la marginea .element:
Deasupra avem un element care are o lățime de 200 px și o înălțime de 200 px și compensăm forma la 50 px în toate direcțiile, cu excepția părții stângi. În acest fel, textul se va înfășura deasupra formei, chiar dacă div se extinde în partea de sus.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 37 | 62 | Nu | 79 | 7.1 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |