outline-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
CSS-свойство outline-style задаёт стиль обводки элемента. Обводка — линия вокруг элемента за пределами рамки (border).
Интерактивный пример
outline-style: none; outline-style: dotted; outline-style: solid; outline-style: groove; outline-style: inset; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with an outline around it. </div> </section> #example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством outline.
Синтаксис
/* Ключевые слова */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* Глобальные значения */ outline-style: inherit; outline-style: initial; outline-style: revert; outline-style: revert-layer; outline-style: unset; Свойство outline-style может быть иметь одно из перечисленных ниже значений.
Значения
auto-
Оставляет стиль обводки на усмотрение браузера.
none-
Отсутствие обводки. Значение
outline-widthв таком случае будет0. dotted-
Обводка в виде линии из точек.
dashed-
Обводка в виде пунктирной линии.
solid-
Обводка в виде сплошной линии.
double-
Обводка из двух сплошных линий. Значение
outline-width— это сумма двух линий и расстояния между ними. groove-
Обводка выглядит так, словно она выгравирована на странице.
ridge-
Противоположность
groove: обводка полностью объёмная, словно выдавлена из страницы. inset-
Обводка выглядит так, словно блок погружается в страницу.
outset-
Противоположность
inset: обводка выглядит так, словно приподнимает блок на странице.
Формальное определение
| Начальное значение | none |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | by computed value type |
Формальный синтаксис
outline-style =
auto |
<outline-line-style>
Примеры
с
Значение auto стилизует обводку согласно спецификации: "как правило, это либо стандартный стиль для данной платформы, либо что-то более разнообразное, как например, яркая обводка с закруглёнными краями".
HTML
<div> <p class="auto">Демонстрация обводки</p> </div> CSS
.auto { outline-style: auto; /* То же самое, что и "outline: auto" */ } /* Для большей наглядности примера */ * { outline-width: 10px; padding: 15px; } Результат
Стиль обводки из линий в виде штрихов и точек
HTML
<div> <div class="dotted"> <p class="dashed">Демонстрация обводки</p> </div> </div> CSS
.dotted { outline-style: dotted; /* То же самое, что и "outline: dotted" */ } .dashed { outline-style: dashed; } /* Для большей наглядности примера */ * { outline-width: 10px; padding: 15px; } Результат
Стиль обводки из сплошной и двойной линий
HTML
<div> <div class="solid"> <p class="double">Демонстрация обводки</p> </div> </div> CSS
.solid { outline-style: solid; } .double { outline-style: double; } /* Для большей наглядности примера */ * { outline-width: 10px; padding: 15px; } Результат
Применение стилей обводки groove и ridge
HTML
<div> <div class="groove"> <p class="ridge">Демонстрация обводки</p> </div> </div> CSS
.groove { outline-style: groove; } .ridge { outline-style: ridge; } /* Для большей наглядности примера */ * { outline-width: 10px; padding: 15px; } Результат
Применение стилей обводки inset и outset
HTML
<div> <div class="inset"> <p class="outset">Демонстрация обводки</p> </div> </div> CSS
.inset { outline-style: inset; } .outset { outline-style: outset; } /* Для большей наглядности примера */ * { outline-width: 10px; padding: 15px; } Результат
Спецификации
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |