Контур - CSS-хитрощі | Альманах CSS 2025

outlineВластивість в CSS малює лінію навколо зовнішньої сторони елемента. Це схоже на кордон, за винятком того, що:

Він завжди обходить усі сторони, ви не можете вказати конкретні сторони
Це не частина моделі коробки, тому вона не вплине на положення елемента або сусідніх елементів (добре для налагодження!)

Інші незначні факти включають те, що він не поважає радіус кордону (мабуть, має сенс, оскільки це не межа) і що він не завжди є прямокутним. Наприклад, якщо контур обводить вбудований елемент із різними розмірами шрифту, Opera намалює навколо всього шахове поле.

Він часто використовується з міркувань доступності, щоб підкреслити посилання при вкладці, не впливаючи на позиціонування, і не так, як наведення.

a:focus ( outline: 1px dashed red; )

Стенографія

outline: ( || || ) | inherit

Він приймає ті самі властивості, що і межа, але замість цього має «контур-».

Вищезазначену стенографію можна було б написати:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Примітки

Ви не можете встановити контур лише з однієї (або двох, або трьох) сторін елементів. Тільки для всіх сторін. Там немає такого поняття , як outline-top, outline-right, outline-bottomабо outline-leftяк там з border.
Спробуйте відкрити консоль на будь-якому веб-сайті та запустити document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- ви побачите багато структур веб-сайтів таким чином.
outlineвикористовується для :focusстилів за замовчуванням. Пам'ятайте, якщо ви коли-небудь видаляєте outlineстилі, наприклад a:focus ( outline: 0; ), вам потрібно додати їх назад, використовуючи якийсь інший тип візуально виразного стилю.