CSS свойство border-image-outset
Определение и применение
CSS свойство border-image-outset определяет величину, на которую область границы изображения выходит за
пределы блока границы.
Для предсказуемого результата задайте ширину границы и border-style: solid; это также обеспечит обычную
границу, если изображение не загрузится.
border-image-outset: 0;
Содержимое
border-image-outset: 16px;
Содержимое
Пунктир обозначает исходную внешнюю границу блока. Ширина границы — 8px; значение 2 без
единиц дало бы такой же выход на 16px.
-
Для свойства
border-image-outsetможно указать от одного до четырех значений (top, right, bottom и left). Порядок указания значений можно запомнить, традиционно используя слово TRouBLe. Если четвертый параметр опущен, он такой же, как второй. Если третий тоже опущен, то он такой же, как первый. А если и второй опущен, то он будет такой же, как первый.
Попробуйте значения border-image-outset
Изображение рамки выносится наружу. Число умножается на border-width (18px), длина задаёт вынос явно. Размер элемента при этом не меняется.
border-image-outset: 0
HTML и CSS примера
HTML
<div class="scene">
<img
class="source"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E"
alt="Исходник: золотые углы, синие стороны с белыми метками, оранжевый центр"
/>
<div class="demo-target">Рамка из изображения</div>
</div>
CSS
.scene {
width: 100%;
max-width: 300px;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.source {
display: block;
width: 60px;
height: 60px;
margin: 0 auto 24px;
}
.demo-target {
box-sizing: border-box;
width: 100%;
min-height: 120px;
padding: 16px;
border: 18px solid #245a85;
background: #fff3d6;
border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
border-image-slice: 30;
border-image-width: 1;
border-image-repeat: stretch;
border-image-outset: 0;
}
CSS
.scene {
width: 100%;
max-width: 300px;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.source {
display: block;
width: 60px;
height: 60px;
margin: 0 auto 24px;
}
.demo-target {
box-sizing: border-box;
width: 100%;
min-height: 120px;
padding: 16px;
border: 18px solid #245a85;
background: #fff3d6;
border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
border-image-slice: 30;
border-image-width: 1;
border-image-repeat: stretch;
border-image-outset: 0.5;
}
CSS
.scene {
width: 100%;
max-width: 300px;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.source {
display: block;
width: 60px;
height: 60px;
margin: 0 auto 24px;
}
.demo-target {
box-sizing: border-box;
width: 100%;
min-height: 120px;
padding: 16px;
border: 18px solid #245a85;
background: #fff3d6;
border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
border-image-slice: 30;
border-image-width: 1;
border-image-repeat: stretch;
border-image-outset: 1;
}
CSS
.scene {
width: 100%;
max-width: 300px;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.source {
display: block;
width: 60px;
height: 60px;
margin: 0 auto 24px;
}
.demo-target {
box-sizing: border-box;
width: 100%;
min-height: 120px;
padding: 16px;
border: 18px solid #245a85;
background: #fff3d6;
border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
border-image-slice: 30;
border-image-width: 1;
border-image-repeat: stretch;
border-image-outset: 12px;
}
Поддержка браузерами
Спецификация: CSS backgrounds
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
border-image-outset | 15 | 12 | 15 | 15 | 6 | 18 | 15 | 14 | 6 | 1.0 | 4.4 | 6 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
CSS
border-image-outset: [ <length [0,∞]> | <number [0,∞]> ]{1,4};
/* Глобальные значения */
border-image-outset: initial | inherit | unset | revert | revert-layer;
| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; {1,4} —
число повторений от 1 до 4; ∞ — отсутствие верхней границы.
JavaScript синтаксис:
JavaScript
element.style.borderImageOutset = "10px";Начальное значение свойства
0.
Значения свойства
| Значение | Описание |
|---|---|
length |
Определяет величину, на которую область границы изображения выходит за пределы блока границы. Значения указываются в единицах измерения CSS. Начальное значение. |
number |
Числовое значение, на которое будет умножено значение свойства
border-width. Число не должно быть отрицательным.
|
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства border-image-outset устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Backgrounds and Borders — спецификация border-image-outset.
Наследуется
Нет.
Анимируемое
Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.
Примеры, попробуйте сами
Выход рисунка за границы блока
Сравните 0 и 1: во втором случае рисунок выступает наружу на одну толщину границы, то есть на 12px. Пунктир показывает исходный размер блока. Попробуйте 6px или 2.
base.css
CSS
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.4 system-ui,
sans-serif;
color: #172c3d;
}
.comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: 24px;
}
section {
min-width: 0;
padding: 16px;
}
h3 {
margin: 0 0 24px;
font-size: 16px;
}
.sample {
min-height: 150px;
padding: 28px;
background: #f4f6f8;
}
.bounds {
outline: 1px dashed #607589;
}
index.html
HTML
<div class="comparison">
<section>
<h3>Вариант A</h3>
<div class="bounds"><div class="sample">Содержимое блока</div></div>
</section>
<section>
<h3>Вариант B</h3>
<div class="bounds"><div class="sample second">Содержимое блока</div></div>
</section>
</div>
style.css
CSS
.sample {
border: 12px solid #607589; /* Граница задаёт место для рисунка. */
border-image-source: repeating-linear-gradient(45deg, #245a85 0 12px, #edc44b 12px 24px);
border-image-slice: 24;
border-image-outset: 0;
}
.second {
border-image-outset: 1;
}
Тони готовит пример…Режим чтения