CSS outline-style Свойство
Пример
Задайте стиль для контура:
div {outline-style: dotted;}
Подробнее примеры ниже.
Определение и использование
Контур представляет собой линию, которая рисуется вокруг элементов (за пределами границ), чтобы сделать элемент "выделиться".
Свойство outline-style
задает стиль структуры.
Значение по умолчанию: | none |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS2 |
Синтаксис JavaScript: | object.style.outlineStyle="dashed" |
Советы и примечания
Контур — это линия вокруг элемента. Он отображается вокруг поля элемента. Однако он отличается от свойства Border.
Структура не является частью размеров элемента, поэтому свойства Width и Height элемента не содержат ширину контура.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Синтаксис CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
none | Указывает без контура. Это значение по умолчанию | |
hidden | Задает скрытый контур | |
dotted | Задает пунктирную структуру | |
dashed | Задает пунктирную структуру | |
solid | Задает сплошной контур | |
double | Задает двойной контур | |
groove | Задание трехмерного контура с канавкой. Эффект зависит от значения цвета контура | |
ridge | Задание трехмерного ребристого контура. Эффект зависит от значения цвета контура | |
inset | Задание трехмерного контура вставки. Эффект зависит от значения цвета контура | |
outset | Задание трехмерного контура начала. Эффект зависит от значения цвета контура | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Пунктирная структура:
div {outline-style: dashed;}
Пример
Сплошной контур:
div {outline-style: solid;}
Пример
Двойной контур:
div {outline-style: double;}
Пример
Контур канавки:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Пример
Очертания хребта:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Пример
Контур вставки:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Пример
Вначале наброски:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Пример
Задайте стиль структуры, используя различные значения:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Похожие страницы
CSS Справочник: CSS Outline
CSS Справка: outline Свойство
HTML DOM Справочник: outlineStyle Свойство