Външна форма - CSS-трикове

Anonim

На 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()функцията изисква радиусите стойности за X, Y ос на елипсата, последвано от координатите за позициониране на центъра на формата на нейна гранична кутия. Например горният пример ще позиционира центъра на елипсата във вертикалния и хоризонталния център на .elementdiv:

Въпреки че демонстрацията по-горе може да предполага, че променяме формата на divсебе си, ако добавим граници и фоново изображение, ще открием, че ограничителното поле всъщност все още е правоъгълно:

Може би е по-добре да мислим по този начин: със shape-outsideсвойството променяме връзката на други елементи около даден елемент, а не геометрията на самия елемент. За да коригираме, че ще трябва да използваме shape-outsideзаедно със clip-path()свойството, например в този пример:

кръг ()

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

Тази функция създава кръг и в примера на кода по-горе ще създаде кръг с радиус, който е половината от височината и ширината на .element. Най circle()функция може да използва същия синтаксис за позициониране формата отвътре.

url ()

.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:

По-горе имаме елемент, който е 200px широк на 200px висок и компенсираме формата в рамките на 50px във всяка посока, с изключение на лявата страна. По този начин текстът ще се увие над формата, въпреки че div се простира до върха.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
37 62 Не 79 7,1 *

Мобилен / таблет

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