border-image-outset в CSS — виніс рамки-картинки назовні
Властивість border-image-outset задає відстань на яку зображення може вийти за межі кордонів блоку.
За допомогою даної властивості можна встановити одночасно відстань відступу для верхнього, правого, нижнього і лівого кордону. Залежно від кількості значень, встановлюються різні елементи відступів:
- Якщо вказано єдине значення, то дана величина застосовується для відступів від всіх країв кордону.
- Якщо вказано два значення, то перша величина - відступ від верхнього і нижнього краю, а друга - для лівого і правго.
- Три значення, встановлюють, ширину відступу від верхнього, правого і лівого, а також нижнього кордонів.
- Чотири значення послідовно застосовуються для всіх відступів, починаючи з верхнього, за годинниковою стрілкою, - верхній, правий, нижній, лівий.
Загальний опис
автор: NagarD
- Порада
-
Зверніть увагу на властивість
автор: Svitlanaborder-image(це скорочена властивість для установки всіхborder-image-властивостей). - Порада
-
Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.
автор: Svitlana - Нотатка
-
Частини зображення, що виступають за межі, як результат значення
автор: Svitlanaborder-boxвластивостіbox-sizing, не збільшують розмір елементу, а також не можуть бити прокручені. Ці області також, не реагують на кліки миші, та ніяк не впливають на батьківський елемент при взаємодії з нею. - Нотатка
-
Використання від'ємних значень заборонено, і будь-яке від'ємне значення буде трактуватися як 0.
автор: Svitlana - Нотатка
-
Частини фонового зображення рамки що виступають за кордон не збільшують розмір блоку і відповідно можуть орізатися областю видимості батьківського елемента.
автор: Svitlana
Синтаксис
border-image-outset: length|number|initial|inherit;Властивість border-image-outset може отримувати 4 значень:
-
length -
Відстань на яке фонове зображення для кордону блоку виступає за ширину самого кордону.
автор: Svitlana -
number -
Кратне значення для відповідного значення властивості
автор: Svitlanaborder-width -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageOutset="10px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 15 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові рамки-зображення, але в другому блоці border-image-outset висуває рамку на 10 пікселів назовні за межі блока.
HTML
<div class="box">без outset</div>
<div class="box out">border-image-outset: 10px</div>CSS
.box {
margin: 16px;
padding: 12px;
border: 12px solid transparent;
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%230172ad'%3E%3Cpath d='M15 0l15 15-15 15L0 15z'/%3E%3Cpath d='M45 0l15 15-15 15-15-15z'/%3E%3Cpath d='M75 0l15 15-15 15-15-15z'/%3E%3Cpath d='M15 30l15 15-15 15L0 45z'/%3E%3Cpath d='M75 30l15 15-15 15-15-15z'/%3E%3Cpath d='M15 60l15 15-15 15L0 75z'/%3E%3Cpath d='M45 60l15 15-15 15-15-15z'/%3E%3Cpath d='M75 60l15 15-15 15-15-15z'/%3E%3C/g%3E%3C/svg%3E");
border-image-slice: 30;
border-image-repeat: round;
}
.out {
border-image-outset: 10px;
}П'ять однакових коробок із картинкою межі. Перша — без виносу, далі число (множник товщини), довжина, недійсний відсоток (лишається нуль) і великий винос, за якого між картинкою й коробкою видно порожній проміжок. Останній ряд: та сама коробка з великим виносом усередині контейнера з overflow: hidden — усе, що вийшло за край, обрізано.
HTML
<div class="row">
<figure><div class="b o0"></div><figcaption>0 — типове</figcaption></figure>
<figure><div class="b o2"></div><figcaption>2 — удвічі за межу</figcaption></figure>
<figure><div class="b opx"></div><figcaption>30px — довжина</figcaption></figure>
<figure><div class="b opc"></div><figcaption>10% — недійсно, лишається 0</figcaption></figure>
<figure><div class="b obig"></div><figcaption>40px — між картинкою й коробкою порожньо</figcaption></figure>
</div>
<p class="cap">Той самий винос у контейнері з overflow: hidden — усе зайве обрізано:</p>
<div class="clip">
<div class="b obig"></div>
</div>CSS
.row {
display: flex;
flex-wrap: wrap;
gap: 60px;
margin-bottom: 40px;
}
figure {
margin: 0;
}
figcaption {
margin-top: 46px;
max-width: 120px;
font: .8em/1.35 system-ui, sans-serif;
color: #5a6472;
}
.b {
width: 90px;
height: 50px;
margin: 44px 0 0;
background: #eef1f5;
border-width: 10px;
border-style: solid;
border-color: #8a94a6;
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23f2b134'/%3E%3Crect x='30' y='30' width='30' height='30' fill='%232f6fd0'/%3E%3C/svg%3E");
border-image-slice: 30;
border-image-repeat: stretch;
}
.o0 { border-image-outset: 0; }
.o2 { border-image-outset: 2; }
.opx { border-image-outset: 30px; }
.opc { border-image-outset: 10%; }
.obig { border-image-outset: 40px; }
.cap {
margin: 0 0 10px;
max-width: 520px;
font: 600 .9em/1.45 system-ui, sans-serif;
color: #5a6472;
}
.clip {
overflow: hidden;
width: 240px;
height: 130px;
background: #cfe8d8;
border: 1px dashed #9dc7ac;
}
.clip .b {
margin: 44px auto 0;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-left-width</strong>.</p>
<p>Вона встановлює ширину лівого кордону елемента.</p>
<strong>border-left-width: </strong>
<input type="number" class="input" id="num" value="24" min="0">px
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border: 16px solid #444;
border-left-width: 24px;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num = document.querySelector('#num').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-left-width', num + 'px'));
}));HTML
<div class="info">
<p>За допомогою властивості <code>border-image-outset</code> ми можемо встановити відстань, на яку зображення кордону може вийти за межі блоку.</p>
<p>Нижче розташовані три блоки. Для першого застосоване значення без задання (тобто 100%) кордон, для двох інишх - 10px і 25px відповідно. При чому, ширина кордону дорівнює 16px.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block small"></div>
<div class="block big"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
text-align: center;
}
.info {
padding: 6px 16px;
margin-bottom: 20px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
width: 100px;
height: 100px;
background-color: gold;
padding: 16px;
border: 16px solid #444;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E") 16 round round;
}
.block.small {
border-image-outset: 10px;
}
.block.big {
border-image-outset: 25px;
}HTML
<div class="block"></div>CSS
.block {
background-color: #eee;
width: 300px;
height: 250px;
border: 16px solid #666;
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E");
border-image-slice: 28;
border-image-width: 0.6em 1.0em;
border-image-outset: 0em 1.1em 1.5em 0.6em;
border-image-repeat: round;
}Коментарі
Коментарів ще немає — будьте першим!