shape-outside
Задаёт форму, которую обтекает текст рядом с плавающим элементом, — круг, многоугольник или контур картинки.
Синтаксис
shape-outside: circle(50%);Значения
| Параметр | Тип | Описание |
|---|---|---|
| circle(), ellipse(), polygon() | shape | Геометрическая фигура, те же функции, что в `clip-path`. |
| margin-box | keyword | По умолчанию: прямоугольник элемента. |
| url() | image | Картинка с прозрачностью: текст следует её непрозрачной части. |
Примеры
Текст обтекает круглое фото:
<style>
img {
float: left; border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
}
</style>
<img src="/media/photo-200x200.jpg" alt="A photo" width="140" height="140">
<p>The text follows the circle instead of the square box of the image. Lines near the middle of the photo are shorter, and lines near the top and the bottom come closer to it. This looks like a printed magazine layout.</p>Примечания
Работает только у элементов с float. Форма меняет обтекание текстом, а не вид элемента: чтобы сама картинка стала круглой, добавьте border-radius или clip-path. shape-margin добавляет зазор между формой и текстом.
См. также
- float — Прижимает элемент к левому или правому краю, чтобы текст обтекал его.
- clip-path — Обрезает элемент по фигуре: видимой остаётся только часть внутри неё.
- border-radius — Скругляет углы элемента.
Вопросы и ответы по теме
В учебнике
- Обтекание: float — Как работает float, обтекание картинки текстом, clear и display: flow-root, и почему колонки сегодня строят на flexbox и grid.