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 Свойство