outline-width в CSS — товщина зовнішнього контуру елемента
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Для задання контуру зручніше використовувати універсальну властивість
автор: Svitlanaoutline.
Синтаксис
outline-width: medium|thin|thick|length|initial|inherit;Властивість outline-width може отримувати 6 значень:
-
medium -
Контур середньої товщини (3 пікселі). Без задання.
автор: Svitlana -
thin -
Тонкий контур.
автор: Svitlana -
thick -
Товстий контур (6 пікселів).
автор: Svitlana -
length -
Власта товщини контуру. Дозволено використовувати будь-які одиниці прийняті в CSS.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.outlineWidth="2px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 1.2 | 7 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Крапчастий контур завтовшки 5 пікселів.
HTML
<p>Абзац із товстим крапчастим контуром.</p>CSS
p {
outline-style: dotted;
outline-width: 5px;
margin: 12px;
}Угорі — три ключові слова й три пастки: товщина без стилю (нічого не намальовано, хоч значення й лишилося), недійсний відсоток і outline-style: auto, який не слухається ні заданої товщини, ні кольору. Далі — пара «контур проти межі» однакової товщини: пунктирна рамка показує, що контур розмірів не змінив, а межа змінила. Унизу — контур по заокругленню, від'ємний outline-offset і контур навколо перенесеного рядкового елемента, який виходить не прямокутним.
HTML
<p class="cap">Ключові слова (стиль скрізь solid):</p>
<div class="row">
<span class="bx thin">thin — 1px</span>
<span class="bx medium">medium — 3px</span>
<span class="bx thick">thick — 5px</span>
</div>
<p class="cap">Пастки:</p>
<div class="row">
<span class="bx nostyle">8px без стилю</span>
<span class="bx percent">50% — недійсно, буде 3px</span>
<span class="bx autost">outline-style: auto</span>
<span class="bx killed">10px, а потім скорочення</span>
</div>
<p class="cap">Однакова товщина 12px: контур місця не займає, межа займає:</p>
<div class="row">
<span class="guide"><span class="sq outl"></span></span>
<span class="guide"><span class="sq bord"></span></span>
</div>
<p class="cap">Контур іде за заокругленням і слухається outline-offset:</p>
<div class="row">
<span class="sq round"></span>
<span class="sq off"></span>
<span class="sq offneg"></span>
</div>
<p class="cap">Рядковий елемент на кілька рядків: контур обводить кожен шматок:</p>
<p class="wrap"><span class="inl">довгий підкреслений контуром напис, якому бракує місця в одному рядку, тож він переноситься</span></p>CSS
.cap {
margin: 18px 0 6px;
max-width: 620px;
font: 600 .9em/1.45 system-ui, sans-serif;
color: #5a6472;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px;
}
.bx {
padding: 8px 10px;
background: #eef1f5;
outline-style: solid;
outline-color: #c0392b;
font: 13px/1.3 system-ui, sans-serif;
}
.thin { outline-width: thin; }
.medium { outline-width: medium; }
.thick { outline-width: thick; }
.nostyle {
outline-style: none;
outline-width: 8px;
}
.percent { outline-width: 50%; }
.autost {
outline-style: auto;
outline-width: 10px;
outline-color: #c0392b;
}
.killed {
outline-width: 10px;
outline: solid #c0392b;
}
.guide {
display: inline-block;
padding: 14px;
border: 1px dashed #b9c6d8;
}
.sq {
display: inline-block;
width: 60px;
height: 40px;
background: #eef1f5;
vertical-align: middle;
}
.outl {
outline: 12px solid #2f6fd0;
}
.bord {
border: 12px solid #72b043;
}
.round {
border-radius: 20px;
outline: 6px solid #c0392b;
}
.off {
margin-left: 14px;
outline: 6px solid #2f6fd0;
outline-offset: 10px;
}
.offneg {
margin-left: 14px;
outline: 6px solid #d67c1c;
outline-offset: -14px;
}
.wrap {
width: 300px;
margin: 0;
font: 15px/34px system-ui, sans-serif;
}
.inl {
background: #eef1f5;
outline: 4px solid #8a5cd6;
}Значення у дії
HTML
<p>Вибери потрібне значення для <code>outline-width</code>:</p>
<input type="number" class="input" min="0" 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.outlineWidth = val + 'px';
}
//# sourceURL=pen.jsПриклад використання
HTML
<div class="block">
<code>
border: 8px solid #888;<br>
Властивість <strong>outline-width</strong> за замовчуванням
</code>
</div>
<div class="block outline">
<code>
border: 8px solid #888;<br>
<strong>outline-width: 50px; </strong>
</code>
</div>CSS
.block {
padding: 36px;
text-align: center;
border: 8px solid #888;
outline-style: solid;
outline-color: red;
background-color: #eee;
width: 300px;
margin: 66px;
font-size: 18px;
}
.outline{
outline-width: 30px;
}Коментарі
Коментарів ще немає — будьте першим!