В 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-boxpadding-boxborder-box
Ці значення повинні бути додані до кінця, наприклад: shape-outside: circle(50% at 0 0) padding-box. За замовчуванням використовується margin-boxпосилання.
еліпс ()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Функція вимагає радіусів значення для х, у осі еліпса , за яким слід координати , щоб розташувати центр форми в межах його обмежувальної рамки. Наприклад, приклад вище розмістить центр еліпса у вертикальному та горизонтальному центрі .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:
Вгорі ми маємо елемент, який має ширину 200 пікселів на висоту 200 пікселів, і ми компенсуємо форму в межах 50 пікселів у кожному напрямку, крім лівої сторони. Таким чином текст обернеться над формою, навіть якщо div поширюється на верх.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 37 | 62 | Ні | 79 | 7,1 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |