Свойство shape-outside в CSS

Определение и использование

shape-outside Атрибут позволяет вам определить форму окружения для строкового контента. По умолчанию строковый контент окружается по его внешним отступам, но с помощью shape-outsideи позволяет вам настроить этот способ окружения.

shape-outside Атрибут определяет область浮动 для плавающего элемента. Эта область浮动 определяет форму, вокруг которой окружается строковый контент плавающего элемента.

Пример

Позволяет содержимому в строке окружать изображение по кругу:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

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

CSS синтаксис

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

Значение атрибута

Значение Описание
none Значение по умолчанию. Область浮动 не受到影响. Внутренний контент окружает элемент по его внешним отступам.
margin-box Определяет форму, окружающую контент по его внешним отступам.
border-box Определяет форму, окружающую контент по его границам.
padding-box Определяет форму, окружающую контент по его внутренним отступам.
content-box

Определяет форму, окружающую контент по его границам.

Каждый угол этого прямоугольника имеет радиус 0 или максимальное значение border-radius - border-width - padding.
basic-shape Область浮动 основана на形状, определенной функциями inset(), circle(), ellipse() или polygon().
url(image) Область浮动 основана на alpha-канале указанного изображения, определенном shape-image-threshold.
initial Этот атрибут устанавливается в его значение по умолчанию. См. initial.
inherit Эта атрибут наследуется из родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: none
Ингерит: нет
Анимация: да для basic-shape. Читайте о анимируемом
Версия: Модуль форм CSS уровня 1
JavaScript синтаксис: object.style.shapeOutside="circle(50%)"

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Кром Эдж Фаерфокс Сафари Опера
37 79 62 10.1 24