outline-offset
Поддержка браузерами
| 3.5+ | 4.0+ | 10.5+ | 3.1+ |
Описание
CSS свойство outline-offset сдвигает внешнюю границу на заданное расстояние от края элемента.
Отличия внешней границы от границы элемента:
- Внешняя граница не увеличивает ширину элемента
- Внешняя граница может быть не прямоугольной формы
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.outlineOffset="15px" |
Синтаксис
outline-offset: величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| величина | Задает величину отступа внешней границы от элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
div {
margin: 20px;
width: 180px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>Свойство outline-offset задает расстояние между внешней границей
и краем элемента в 15px.</div>
</body>
</html>
Результат данного примера в окне браузера:
