English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство outline-style CSS устанавливает стиль обводки элемента. Однако, в работе мы больше предпочитаем использоватьoutlineЭта сокращенная свойство.
В таблице приведено описание использования и историю версий этого свойства, а также его использование в скриптах JavaScript.
| Значение по умолчанию: | none |
|---|---|
| Для: | все элементы |
| Наследование: | нет |
| Анимация: | Нет.См. также Анимационные свойства. |
| Версия: | CSS 2, 3 |
| JavaScript синтаксис: | объект.style.outlineStyle="dotted" |
Синтаксис этого свойства следующий:
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
Ниже приведен пример того, как использовать свойство outline-style.
p {
outline-style: double;
outline-width: 5px;
}Тестировать, смотреть‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| none | Не показывать контур. Это значение по умолчанию. |
| dotted | Показать контур в виде серии точек. |
| dashed | Показать контур в виде серии коротких отрезков, то есть тире. |
| solid | Показать контур в виде одной сплошной линии. |
| double | Показать контур в виде двух параллельных сплошных линий, оставляя между ними определенное расстояние. Общая длина линий и расстояние между ними равноoutline-widthзначением. |
| groove | Показать контур, выгравированный в canvás. Он создает впечатление 3D, обычно достигается созданием двух тени с двух цветов, и эти тени должны бытьoutline-colorцвета немного ярче и темнее. |
| ridge | Показать контур, обратный эффекту groove. Он также создает впечатление 3D, контур выглядит, как будто он выходит из canvásа. |
| inset | Показать контур, делающий элемент看起来, как будто вмонтированный в canvás. Он также создает впечатление 3D, обычно достигается созданием двух тени с двух цветов, и эти тени должны бытьoutline-colorцвета немного ярче и темнее. |
| outset | Показать контур, обратный эффекту inset. Он также создает впечатление 3D, контур делает коробку, казалось бы, выступающей из canvаса. |
| initial | Установить это свойство в его значение по умолчанию. |
| inherit | Если задан, то связанный элемент принимает значение свойства outline-style родительского элемента. |
Совместимость браузеров для свойства outline-style, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Предупреждение: Интернет-Explorer 7 и более ранние версии не поддерживают свойство outline-style. IE8 поддерживает это свойство, но требует<!DOCTYPE>.
Пожалуйста, обратитесь к руководствам по следующим темам:CSS контур,CSS рамка.
Связанные свойства:outline,outline-color,outline-width.