Больше "Try it Yourself" примеры ниже.
Определение и использование
Контур является линией , которая обращается вокруг элементов (outside the borders) , чтобы сделать элемент "stand out" .
Свойство очертание стиля определяет стиль контура.
| Значение по умолчанию: | none |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object .style.outlineStyle="dashed" Try it |
Советы и примечания
Контур представляет собой линию вокруг элемента. Она отображается вокруг края элемента. Тем не менее, она отличается от собственности на границе.
Контур не является частью размеров элемента, поэтому свойства ширина и высота элемента не содержат ширину контура.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| outline-style | 1,0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: IE8 поддерживает свойство очертание стиле , только если DOCTYPE указан!.
CSS Синтаксис
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| none | Задает отсутствие контура. Это по умолчанию | Сыграй " |
| hidden | Задает скрытый контур | Сыграй " |
| dotted | Указывает пунктирный контур | Сыграй " |
| dashed | Указывает пунктирную контур | Сыграй " |
| solid | Определяет контур твердой | Сыграй " |
| double | Указывает двойную Outliner | Сыграй " |
| groove | Определяет 3D рифленый контур. Эффект зависит от значения очертание цветов | Сыграй " |
| ridge | Определяет коньковый контур 3D. Эффект зависит от значения очертание цветов | Сыграй " |
| inset | Определяет 3D врезку контур. Эффект зависит от значения очертание цветов | Сыграй " |
| outset | Определяет 3D контур начала. Эффект зависит от значения очертание цветов | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Установить стиль контура с использованием различных значений:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} Попробуй сам " Похожие страницы
Учебник CSS: CSS Outline
Справка CSS: outline property
HTML DOM ссылка: outlineStyle property