shape-outside

Определение и применение

Свойство shape-outside задаёт форму, вокруг которой обтекает текст рядом с плавающим элементом. Например, строки могут огибать круглую фотографию, постепенно приближаясь к её краям.

Как заставить текст обтекать круглое фото — в уроке «Плавающие элементы и обтекание текстом в CSS».

Попробуйте значения shape-outside

Переключайте форму обтекания. Голубой круг сохраняет вид, а соседние строки меняют положение.

Значение свойства

shape-outside: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">Фото</div>
  <p>
    Тони гуляет по парку, приносит мячик и отдыхает в тени деревьев. Рядом с
    фотографией строки следуют форме обтекания. Меняйте значение и сравнивайте
    начало каждой строки. Тони гуляет по парку, приносит мячик и отдыхает в тени
    деревьев. Рядом с фотографией строки следуют форме обтекания. Меняйте
    значение и сравнивайте начало каждой строки.
  </p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  display: flow-root;
  font-size: 14px;
}
p {
  margin: 0;
}
.demo-target {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  background: #9bd3ec;
  color: #173b52;
  text-align: center;
  padding-top: 45px;
  shape-outside: none;
}

Поддержка браузерами

Спецификация: CSS shapes

Поддерживается во всех основных браузерах с 2020 года.

Отдельные значения (3) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.shape-outside
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
shape-outside✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
border-box✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
circle✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
content-box✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
gradient✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
image✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
inset✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
margin-box✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
none✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
padding-box✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
path✓149✓149×✓133×✓149×✓100××✓149×
polygon✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3
rect✓149✓149✓149✓133✓17.2✓149✓149✓100✓17.2×✓149✓17.2
xywh✓149✓149✓149✓133✓17.2✓149✓149✓100✓17.2×✓149✓17.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Поддержку сложных форм проверяйте отдельно. Новые функции shape(), path(), rect() и xywh() и расширения опорных областей нельзя считать доступными только по наличию базового shape-outside. Спецификация также описывает применение к буквицам initial-letter.

CSS синтаксис:

CSS
shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>;

<shape-box> = margin-box | border-box | padding-box | content-box;

/* Новая опорная область: поддержка ограничена */
shape-outside: <basic-shape>? half-border-box;

/* Глобальные значения */
shape-outside: initial | inherit | unset | revert | revert-layer;

| разделяет варианты, || разрешает одну или обе части в любом порядке. <basic-shape> — геометрическая форма, например circle(), ellipse(), inset() или polygon(); <image> — изображение, в том числе url() или градиент. ? означает необязательную форму перед опорной областью.

JavaScript синтаксис:

JavaScript
element.style.shapeOutside = "circle(50%)";

Начальное значение свойства

none.

Значения свойства

Значения shape-outside
Значение Описание
none Обычное обтекание области плавающего элемента с внешними отступами. Начальное значение.
<basic-shape> Форма, определяющая свободное место для строк. Без отдельной опорной области используется margin-box.
<shape-box> Форма области содержимого, внутренних отступов, рамки или внешних отступов. Учитывает скругления соответствующей области.
<basic-shape> <shape-box> Форма рассчитывается относительно указанной области: например, circle(50%) border-box.
<image> Форма строится по прозрачности изображения. Порог задаёт shape-image-threshold; для внешнего ресурса нужен разрешённый доступ, а у плавающего элемента должны быть определены размеры.
half-border-box Новая опорная область по середине толщины рамки, между padding-box и border-box. Поддержка ограничена.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства shape-outside устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Форма текста и вид картинки

В обычном сценарии сначала нужен float: left или float: right. Свойство не заставляет текст обтекать обычный Flexbox-элемент и не рисует контур само. Круглую фотографию оформляют через border-radius: 50%, а круг для строк отдельно задают через shape-outside: circle(50%).

Расстояние между формой и текстом добавляет shape-margin. Область, влияющая на обтекание, ограничена областью внешних отступов плавающего элемента. Контейнер с display: flow-root включает высоту плавающего содержимого. На узком экране полезно отменить float, чтобы рядом с картинкой не оставалась тонкая колонка текста.

Спецификация

CSS Shapes — shape-outside.

Наследуется

Нет.

Анимируемое

Совместимые геометрические формы интерполируются по своим параметрам при одинаковой опорной области. Несовместимые формы, изображения и ключевые слова могут переключаться дискретно.

Примеры, попробуйте сами

Текст вокруг круга

Замените circle(50%) на none: картинка останется круглой, а строки начнут огибать прямоугольник. Затем уменьшите радиус до 40% и сравните форму строк.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
article {
    max-width: 32rem;
}
p {
    margin: 0;
}
.photo {
    background: #86efac;
    border: 3px solid #15803d;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Текст вокруг круга</title>
  </head>
  <body>
    <article>
      <div class="photo" aria-hidden="true"></div>
      <p>
        Тони вышел на лесную тропу ранним утром. В траве блестела роса, а над озером поднимался туман. Он остановился у
        большой сосны и прислушался к птицам. Дорога постепенно поворачивала к воде. На берегу нашлось удобное место для
        отдыха и заметок о прогулке.
      </p>
    </article>
  </body>
</html>
style.css
CSS
article {
    display: flow-root;
}
.photo {
    float: left;
    width: 140px;
    height: 140px;
    margin: 0 24px 12px 0;
    border-radius: 50%;
    shape-outside: circle(50%) border-box;
    shape-margin: 12px;
}