В 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()это функция для создания прямоугольных форм, она принимает пять параметров, но пятый, for border-radiusявляется необязательным. Остальные аргументы - смещения внутрь от края .element:
Выше у нас есть элемент шириной 200 пикселей и высотой 200 пикселей, и мы смещаем форму в пределах 50 пикселей во всех направлениях, кроме левой стороны. Таким образом текст будет обтекать фигуру, даже если div простирается вверх.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 37 | 62 | Нет | 79 | 7.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 8 * |