СSS Свойство outline-style
Определение и использование
Контур - это линия, которая рисуется вокруг элементов (вне границ), чтобы элемент "выделялся".
Свойство outline-style определяет стиль контура.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.outlineStyle="dashed" Попробовать |
Советы и примечания
Контур - это линия вокруг элемента. Он отображается вокруг поля элемента. Однако он отличается от пограничного свойства.
Свойство outline не является частью размеров элемента, поэтому свойства 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 | Задает 3D контур паза. Эффект зависит от значения цвета контура | Воспроизвести » |
| ridge | Задает 3D контур ребро. Эффект зависит от значения цвета контура | Воспроизвести » |
| inset | Задает 3D контур вставка. Свойство effect depends on the outline-color value | Воспроизвести » |
| outset | Задает 3D контур начала. Эффект зависит от значения цвета контура | Воспроизвести » |
| initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Контур паза:
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 Контур
CSS Справочник: Свойства outline
HTML DOM Справочник: Свойства outlineStyle
