CSS
Формы для поплавков
Поиск…
Синтаксис
форма снаружи: нет | [<basic-shape> || <shape-box>] | <Изображение>
margin-size: <длина> | <Процент>
shape-image-threshold: <number>
параметры
| параметр | подробности |
|---|---|
| никто | Значение none означает, что область с плавающей точкой (область, которая используется для обертывания содержимого вокруг элемента float) не изменяется. Это значение по умолчанию / начальное значение. |
| Основная форма, | Относится к одному из inset() , circle() , ellipse() или polygon() . Используя одну из этих функций и ее значения, определяется форма. |
| форма ящик | Относится к одному из margin-box , border-box , padding-box content-box . Когда предоставляется только <shape-box> (без <basic-shape>), это поле является формой. Когда он используется вместе с <basic-shape>, это действует как ссылочный блок. |
| образ | Когда изображение предоставляется как значение, форма вычисляется на основе альфа-канала указанного изображения. |
замечания
Поддержка браузера для модуля CSS Shapes очень ограничена на данный момент времени.
Он поддерживается в Chrome v37 + и Opera 24+ без префиксов браузера / поставщика. Safari поддерживает его с v7.1 +, но с префиксом -webkit- .
Он еще не поддерживается в IE, Edge и Firefox.
Форма снаружи с основной формой - круг ()
С помощью свойства CSS shape-outside можно определить значения формы для области с плавающей точкой, чтобы встроенный контент обертывался вокруг формы, а не в поле float.
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
В приведенном выше примере оба изображения на самом деле являются квадратными изображениями, а когда текст помещен без свойства shape-outside , он не будет течь по кругу с обеих сторон. Он будет обтекать только содержащую коробку изображения. С shape-outside находящейся shape-outside с плавающей точкой, переопределяется как круг, и содержимое создается для обтекания этого воображаемого круга, который создается с использованием shape-outside .
Воображаемая окружность, которая используется , чтобы повторно определить область поплавка представляет собой окружность с радиусом 80 пикселей , проведенным из центра, средней точки отсчета поля изображения.
Ниже приведены несколько скриншотов, чтобы проиллюстрировать, как содержимое будет обернуто, когда используется shape-outside и когда она не используется.
Выход с shape-outside
Выход без shape-outside
Форма края
shape-margin свойство CSS добавляет маржу shape-outside .
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
В этом примере маркер 10px добавляется вокруг формы с использованием shape-margin . Это создает немного больше пространства между воображаемым кругом, который определяет область с плавающей точкой и фактическое содержимое, которое течет.
Выход:
