This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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> <div> 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>
<outline-line-style> =
none|
auto|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Примеры
с
Значениеauto стилизует обводку согласноспецификации: "как правило, это либо стандартный стиль для данной платформы, либо что-то более разнообразное, как например, яркая обводка с закруглёнными краями".
HTML
<div> <p>Демонстрация обводки</p></div>CSS
.auto { outline-style: auto; /* То же самое, что и "outline: auto" */}/* Для большей наглядности примера */* { outline-width: 10px; padding: 15px;}Результат
Стиль обводки из линий в виде штрихов и точек
HTML
<div> <div> <p>Демонстрация обводки</p> </div></div>CSS
.dotted { outline-style: dotted; /* То же самое, что и "outline: dotted" */}.dashed { outline-style: dashed;}/* Для большей наглядности примера */* { outline-width: 10px; padding: 15px;}Результат
Стиль обводки из сплошной и двойной линий
HTML
<div> <div> <p>Демонстрация обводки</p> </div></div>CSS
.solid { outline-style: solid;}.double { outline-style: double;}/* Для большей наглядности примера */* { outline-width: 10px; padding: 15px;}Результат
Применение стилей обводки groove и ridge
HTML
<div> <div> <p>Демонстрация обводки</p> </div></div>CSS
.groove { outline-style: groove;}.ridge { outline-style: ridge;}/* Для большей наглядности примера */* { outline-width: 10px; padding: 15px;}Результат
Применение стилей обводки inset и outset
HTML
<div> <div> <p>Демонстрация обводки</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 |