outline-offsetВластивість в CSS зсувам певного контуру від краю кордону елемента шляхом зазначеної суми. Контур, який відрізняється від межі, не займає місця на сторінці (як абсолютно позиціонований елемент), тому контур може бути зміщений будь-якою величиною, і це не вплине на положення або розташування оточуючих елементів.
.example ( outline: solid 2px blue; outline-offset: 10px; )Контури, визначені за допомогою outlineвластивості, часто використовуються як фокусні кільця для доступності. Таким чином, outline-offsetвластивість дозволяє змінювати положення фокусного кільця.
Цінності
outline-offset приймає значення одного виду, довжину, яке може бути:
0(за замовчуванням)- Будь-яка інша допустима довжина із зазначеною одиницею (включаючи від’ємні значення)
Зауважте, що outline-offset, як, наприклад outline-width, не приймає відсоткові значення.
Позиціонування структури
За замовчуванням контур елемента малюється відразу за межами (або безпосередньо за межами місця, де буде проведений кордон, якщо буде визначено межу). Отже, технічно можливо поєднати контур і межу для двомежного ефекту:
Звідти outline-offsetможна використовувати для зміни положення контуру щодо краю межі. Спробуйте демонстраційну версію, яка дозволяє інтерактивно змінювати значення зміщення контуру за допомогою повзунка. Значення зміщення відображається на сторінці під час переміщення повзунка:
Як зазначалося вище, outline-offsetприймає від'ємні значення, які зміщуватимуть контур у протилежному напрямку (до центру елемента), як показано в наступному інтерактивному демо. Зверніть увагу, що контур починається з -40 пікселів:
Якщо ви переглянете вищезгадану демонстраційну версію у Firefox, ви спочатку помітите, що контур здається правильним, але коли регулюється повзунок, контур не відображається гладко і опиняється в неправильному положенні. Прокрутка елемента з поля зору, а потім повернення у поле зору змушує браузер перефарбувати контур у правильне положення. Здається, це помилка лише у Firefox.
Не є частиною outlineстенографії
Подібно borderвласності, outlineвластивість є узагальнюючим , що представляє три властивості: outline-color, outline-styleі outline-width.
Отже, outline-offsetвластивість не представлена в цьому чи будь-якому іншому скороченому властивості, тому його потрібно декларувати окремо від самого визначеного контуру.
Пов’язані
- контур
- кордон
Більше інформації
- контур-зміщення на W3C
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Індикатор „частково” для IE означає, що IE не підтримує outline-offset, але підтримує outlineскорочення та три властивості, які він представляє.
На додаток до помилки, згаданої вище в розділі «Позиціонування структури», у Firefox є помилка, коли контур намальований неправильно, якщо елемент має дочірній елемент, який перевищує батьківський кордон (наприклад, за допомогою негативних полів або абсолютного позиціонування) . Отже, outline-offsetзначення буде відносно розширеної межі, створеної переповнюючим нащадком, а не вихідних кордонів батьківських елементів. Щоб краще це зрозуміти, див. Цей CodePen, цей потік переповнення стека та цей звіт про помилку (заслуга читача Метта Вейнза за надсилання цієї помилки).