Outline — це лінія, якою можна обвести той чи інший елемент. За допомогою outline можна виділити елемент посеред інших.
Зауважте, якщо об’єкт має одночасно outline
і border
, то останній буде знаходитись всередині outline
. Взагалі outline має суттєву відмінність від border: він не є частиною елементу, а значить, висота і ширина елементу будуть розраховуватись без розмірів outline.
Цей елемент має чорний бордер і подвійний червоний контур шириною 10px
Стиль
Властивість outline-style
визначає стиль контуру.
Для outline-style
можливі наступні значення:
dotted
— пунктирний точковий контурdashed
— пунктирний контурsolid
— суцільний контурdouble
— подвійний контурgroove
— об’ємний контур, вимагає outline-color- <code”>ridge — об’ємний контур із внутрішньою тінню, вимагає outline-color
inset
— об’ємний внутрішній контур, вимагає outline-coloroutset
— об’ємний зовнішній контур, вимагає outline-colornone
— жодного контуруhidden
— прихований контур
Наступний приклад спочатку вказує тонкий чорний бордер для кожного елементу <p>
, а потім додає різні стилі outline-style
до кожного елементу:
p { border: 1px solid black; outline-color: red; } p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;}
Ось що вийде в результаті:
dotted outline
dashed outline
solid outline
double outline
groove outline
ridge outline
inset outline
outset outline
Колір контуру
Властивість outline-color
потрібна для зазначення кольору контурів.
Колір можна вказати за допомогою:
- імені — вказати ім’я кольору, як-то
red
- RGB — вказати RGB, наприклад
rgb(255,0,0)
- Hex — за допомогою hex-значення,
#ff0000
invert
— створює контур з кольором, інвертованим з кольору фону.
p { border: 1px solid black; outline-style: double; outline-color: red; }
Ширина контуру
Властивість outline-width
допомагає вказати ширину контуру.
Значення може вказано у цифровому вигляді (in px, pt, cm, em тощо) або одним з трьох значень за замовчуванням: thin
, medium
або thick
.
p {border: 1px solid black;} p.one { outline-style: double; outline-color: red; outline-width: thick; } p.two { outline-style: double; outline-color: green; outline-width: 3px; }
Скорочений запис
Щоб скоротити код, можна вказувати контур в оодну лінію.
Для цього використовується властивість outline
з такими параметрами:
outline-width
outline-style
(необхідно)outline-color
Ось приклад:
p { border: 1px solid black; outline: 5px dotted red; }
І ось результат:
контур
Підсумок
Властивість | Опис |
---|---|
outline | Додавання контуру з декларацією в одну лінію |
outline-color | Вказання кольору контуру |
outline-offset | Вказання відступу між контуром і бордером елементу |
outline-style | Вказання стилю контуру |
outline-width | Вказання ширини контуру |