CSS приклад: outline-offset

Інтернет ЕксплорерХромОпераСафаріФайрфоксAndroidiOS
1.0+9.5+2.0+1.5+1.0+1.0+

Коротка інформація

Значення за замовчуванням 0
НаслідуєтьсяНі
ЗастосовуєтьсяДо всіх елементів
Посилання на специфікацію http://www.w3.org/TR/css3-ui/#outline-offset

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Встановлює відстань між рамкою, створеною за допомогою властивості outline, та краєм або межею елемента, доданої через border.

Синтаксис

outline-offset: <розмір> | inherit

Значення

<розмір>
Вказує відстань від краю елемента до рамки. Від'ємне значення відображає рамку всередині елемента, позитивне — навколо елемента.
inherit
Наслідує значення батька.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-offset</title>
  <style>
   .clue {
    background: url(images/leather.jpg); /* Фонове зображення */
    outline: 2px dashed rgba(255,255,255,0.8); /* Пунктирна рамка */
    outline-offset: -10px; /* Виводимо рамку всередині елемента */
    padding: 10px; /* Відступи */
    min-height: 100px; /* Мінімальна висота */
   }
  </style>
 </head>
 <body>
   <div class="clue"></div>
 </body>
</html>

Результат цього прикладу показаний на рис. 1.

Об'єктна модель

[window.]document.getElementById("elementID").style.outlineOffset

Часті запитання

  • Q: Як використовувати outline-offset в CSS?

    A: outline-offset використовується для встановлення відступу між обведенням (outline) та елементом. Наприклад: outline-offset: 5px;

  • Q: Для чого потрібно використовувати outline-offset в CSS?

    A: outline-offset дозволяє контролювати відстань між обведенням (outline) та елементом, що корисно при стилізації фокусування на елементах форми або при наведенні курсору.

  • Q: Як встановити значення outline-offset для елемента в CSS?

    A: Значення outline-offset можна встановити як певну відстань від елемента, наприклад: outline-offset: 10px; або використовуючи ключові слова, такі як auto або initial.

  • Q: Як використовують outline-offset для стилізації кнопок?

    A: Використання outline-offset для стилізації кнопок дозволяє створити відокремлене обведення, яке може бути відступене від самого елемента, підкреслюючи його виділення.

  • Q: Чи підтримує outline-offset всі браузери?

    A: outline-offset підтримується більшістю сучасних браузерів, але можуть бути проблеми з кросбраузерною сумісністю в деяких старих версіях браузерів.