Свойство CSS border-image-outset
Свойство CSS border-image-outset задаёт расстояние, на которое изображение рамки выходит за пределы блока границы. Примеры и интерактивные демо.
Свойство CSS border-image-outset задаёт величину, на которую область изображения рамки выходит за пределы блока границы элемента. Оно входит в число свойств CSS3.
По умолчанию изображение рамки отрисовывается внутри блока границы. Выдвигать его наружу с помощью border-image-outset полезно, когда декоративная рамка должна выступать за пределы элемента — например, орнаментальная рамка, рамка, имитирующая тень, или эффект ленты, которая должна находиться снаружи содержимого, а не стеснять его.
Выступ влияет только на то, где рисуется изображение; размер блока элемента и его положение в потоке при этом не изменяются. Дополнительная область может перекрывать соседнее содержимое, поэтому оставляйте достаточно пространства (или дополнительных отступов) вокруг элемента, чтобы избежать обрезки или наложения.
Как это работает
border-image-outset принимает от одного до четырёх значений по стандартному сокращённому шаблону CSS: верх–право–низ–лево:
- Одно значение устанавливает все четыре выступа.
- Два значения — первое задаёт верх и низ, второе — право и лево.
- Три значения — первое задаёт верх, второе — право и лево, третье — низ.
- Четыре значения применяются к верхней, правой, нижней и левой сторонам в указанном порядке.
Каждое значение может быть либо <length> (например 10px), либо безразмерным <number>. Число является множителем соответствующей ширины границы элемента: при border-width: 10px выступ 2 составит 20px. Отрицательные значения не допускаются.
Свойство не оказывает видимого эффекта, если не задан источник изображения рамки (через border-image или border-image-source).
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам, кроме внутренних элементов таблиц, когда border-collapse равно "collapse". Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.borderImageOutset = "20px"; |
Синтаксис
Значения CSS border-image-outset
border-image-outset: length | number | initial | inherit;Пример свойства border-image-outset:
Пример кода CSS border-image-outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
</body>
</html>Результат
![Описание CSS border-image-outset](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "Пример CSS border-image-outset" =420x)
В приведённом примере изображение рамки выдвинуто на 10px за верхний край, вровень с правым краем (0) и на 15px за нижний край — таким образом рамка заметно выступает за пределы абзаца.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
length | Расстояние, на которое изображение рамки выходит за пределы блока границы, заданное в любой единице длины CSS (px, em и др.). По умолчанию 0. | Попробовать » |
number | Безразмерный множитель соответствующей ширины границы элемента. Например, 2 при границе 10px равно 20px. | Попробовать » |
initial | Устанавливает свойство в значение по умолчанию (0). | Попробовать » |
inherit | Наследует свойство от родительского элемента. |
Связанные свойства
border-image-outset является одной из составных частей сокращённого свойства border-image. Следующие сопутствующие свойства управляют остальными параметрами эффекта:
- border-image — сокращённое свойство, задающее все значения border-image одновременно.
- border-image-source — изображение, используемое в качестве рамки.
- border-image-slice — способ разрезания исходного изображения на девять областей рамки.
- border-image-width — ширина области изображения рамки.
- border-image-repeat — способ заполнения фрагментов: растягивание, повторение или скругление.