Перейти к содержанию

shape-outside

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

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

Демо

Маски и Фигуры

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path(
  'M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'
);

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(
  45deg,
  rgba(255, 255, 255, 0) 150px,
  red 150px
);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

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

Ссылки

Комментарии