CSS outline-offset — відступ контуру від елемента
Властивість outline-offset встановлює відстань між контуром та кордоном елемента (властивість border).
Без задання контури розташовані безпосередньо біля краю кордону. Використовуючи outline-offset, ви можете ромістити за межами кордону.
Простір між елементом та його контуром прозорий; іншими словами, той же самий, що і фон батьківського елемента.
автор: Svitlana
Загальний опис
автор: NagarD
Синтаксис
outline-offset: length|initial|inherit;Властивість outline-offset може отримувати 3 значень:
-
length -
Задає між контуром та кордоном елемента. Від'ємне значення відобразить контур всередині елемента, додатнє - навколо елемента.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.outlineOffset="15px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 1.2 | 9.5 | 15 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Між чорною рамкою і червоним контуром — проміжок 15 пікселів, який створює outline-offset.
HTML
<div>Контур відсунуто на 15px від рамки.</div>CSS
div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
margin: 20px;
padding: 8px;
}Порівняння: без відступу контур притиснутий до рамки, з outline-offset: 15px — відсунутий, і між ними видно тло.
HTML
<div class="off0">outline-offset: 0</div>
<div class="off15">outline-offset: 15px</div>CSS
div {
border: 2px solid black;
outline: 2px solid red;
margin: 24px;
padding: 8px;
}
.off0 { outline-offset: 0; }
.off15 { outline-offset: 15px; }Три однакові блоки з чорною рамкою й червоним контуром. Різниця тільки в outline-offset: нуль — контур притиснутий до рамки, 8px — відсунутий назовні крізь прозорий проміжок, -8px — намальований усередині елемента.
HTML
<div class="row">
<div class="b zero">offset: 0</div>
<div class="b plus">offset: 8px</div>
<div class="b minus">offset: -8px</div>
</div>CSS
body {
font-family: monospace;
font-size: 13px;
padding: 26px;
background-color: #e8eef5;
}
.row {
display: flex;
gap: 40px;
}
.b {
width: 120px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #ffd166;
border: 3px solid #333;
outline: 3px solid #c0392b;
}
.zero {
outline-offset: 0;
}
.plus {
outline-offset: 8px;
}
.minus {
outline-offset: -8px;
}Значення у дії
HTML
<p>Вибери потрібне значення для <code>outline-offset</code>:</p>
<input type="number" class="input" value="16" id="val" onchange="change(this.value)"></input>
<div id="block"></div>CSS
body {
padding: 36px;
text-align: center;
line-height: 1.45;
font-size: 20px;
font-family: sans-serif;
counter-reset: chapter 2;
}
.input {
margin-bottom: 16px;
padding: 1px;
font-size: 13px;
}
#block {
padding: 36px;
width: 275px;
margin: 75px auto 0 auto;
border: 8px solid #666;
outline: 16px solid #000;
transition: all .15s ease-in;
}JS
function change(val) {
block.style.outlineOffset = val + 'px';
}
//# sourceURL=pen.jsПриклад використання
HTML
<div class="block">
<code>
border: 8px solid #888;<br>
outline: 16px solid red;<br>
Властивість <strong>outline-offset</strong> за замовчуванням
</code>
</div>
<div class="block outline">
<code>
border: 8px solid #888;<br>
outline: 16px solid red;<br>
<strong>outline-offset: 16px;</strong>
</code>
</div>CSS
.block {
padding: 36px;
text-align: center;
border: 8px solid #888;
outline-width: 16px;
outline-style: solid;
outline-color: red;
background-color: #eee;
width: 300px;
margin: 66px;
font-size: 18px;
}
.outline{
outline-offset: 16px;
}Коментарі
Коментарів ще немає — будьте першим!