У shape-outside
контролише имовину како ће садржај замотати око граничним-бок а лебдела елемента. То је обично тако да се текст може преобликовати преко облика попут круга, елипсе или полигона:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )


Важно је напоменути да ће ово својство за сада радити само на плутајућим елементима, мада ће се ово вероватно променити у будућности. shape-outside
Имовина може се руковати са прелазима или анимацијама.
Вредности
circle()
: за израду кружних облика.ellipse()
: за израду елиптичних облика.inset()
: за израду правоугаоних облика.polygon()
: за стварање било ког облика са 3 или више темена.url()
: идентификује коју слику треба користити за умотавање текста.initial
: површина пловка је непромењена.inherit
: наслеђујеshape-outside
вредност од родитеља.
Следеће вредности идентификују коју референцу модела кутије треба користити за позиционирање облика унутар:
margin-box
padding-box
border-box
Ове вредности треба додати до краја, на пример: shape-outside: circle(50% at 0 0) padding-box
. Подразумевано margin-box
ће се користити референца.
елипса ()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )
ellipse()
Функција захтева од радијуса вредности за к, и оса елипсе затим координатама да позиционирају центар облика унутар своје селекцију. На пример, горњи пример ће поставити центар елипсе у вертикално и хоризонтално средиште .element
див-а:
Иако претходна демонстрација може сугерисати да мењамо облик самог div
себе, ако додамо обрубе и позадинску слику, открићемо да је оквир за ограничавање у ствари још увек правоугаони:
Можда би било боље да о томе размишљамо на овај начин: shape-outside
својством мењамо однос осталих елемената око елемента, а не геометрију самог елемента. Да бисмо поправили то што ћемо морати да користимо shape-outside
поред clip-path()
својства, као у овом примеру:
круг ()
.element ( shape-outside: circle(50%); )
Ова функција креира круг, ау горњем примеру кода креираће круг полупречника пола половине висине и ширине .element
. circle()
Функција може користити исту синтаксу за позиционирање облика у.
урл ()
.element ( shape-outside: url('circle.png.webp'); )
У овом случају имамо две лебдеће слике, једну са обе стране блока текста. Будући да обе слике имају постављено shape-outside
својство, онда ће текст испод избегавати та два плутања.
Такође је могуће подесити shape-image-threshold
својство које ће обавештавати прегледач који пиксели, у зависности од њихове транспарентности, треба да креирају облик. На пример:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )
У овом примеру једини пиксели који ће створити облик морају имати 50% прозирности и више. Вредности од 0.0
(транспарентно) до 1.0
(непрозирно) су важеће.
полигон ()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )
Ова функција ствара било који облик који има три или више темена, на пример:
Важно је напоменути да ако ће ово својство бити анимирано, потребан му је исти број темена када изјавите анимирано стање:
.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%); )
инсет ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )
inset()
је функција за прављење правоугаоних облика, потребно је пет параметара, али пети, јер border-radius
није обавезан. Остали аргументи се померају према ивици .element
:
Изнад имамо елемент који је широк 200 пиксела и висок 200 пиксела и поравнавамо облик унутар 50 пиксела у свим правцима, осим на левој страни. На овај начин ће се текст премотати изнад облика, иако се див протеже до врха.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
37 | 62 | Не | 79 | 7,1 * |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 | 85 | 81 | 8 * |