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 |
Совместимость с браузерами
Loading…