✔outline-style

22 марта 2016 2 787 Справочник CSS 1

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	2.0+	1.5+	1.0+	1.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

Значения

none: Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной рамки.
ridge: Создает эффект рельефной границы.
inset: Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset: Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
inherit: Наследует значение родителя.

Вид указанных стилей представлен на рис..;1.

Рис. 1. Вид границы с разным значением стилей

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-style</title>
  <style>
   .noborder a {
    outline-style: none; /* Убираем границу вокруг ссылок */ 
   
  </style>
 </head> 
<body> 
   <p><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>
   <p class="noborder"><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>
 </body>
</html>

Результат примера показан на рис..;2. В данном примере для браузера IE8 убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.

Рис. 2. Использование свойства outline-style для ссылок

Объектная модель

[window.]document.getElementById("elementID")style.outlineStyle

Internet Explorer Chrome Opera Safari Firefox Android iOS 8.0 1.0 7.0 2.0 1.5 1.0 1.0 Краткая информация Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам Ссылка на спецификацию Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение. Синтаксис outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной рамки. ridge Создает эффект рельефной границы. inset Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются. outset Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются. inherit Наследует значение родителя. Вид указанных стилей представлен на рис;1. .; Рис. 1. Вид границы с разным значением стилей Пример HTML5 CSS2.1 IE Cr Op Sa Fx Результат примера показан на рис;2. В данном примере для браузера IE8 убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style. .; Рис. 2. Использование свойства outline-style для ссылок Объектная модель _

Цитирование статьи, картинки - фото скриншот - Rambler News Service.

Иллюстрация к статье - Яндекс. Картинки.

Есть вопросы. Напишите нам.

Общие правила поведения на сайте.

запостил(а)

Administrator

Вернуться назад