outline-style¶
Свойство outline-style
устанавливает стиль внешней границы элемента.
В отличие от линии, задаваемой через border
, линия через outline
отображается вокруг элемента, не влияя на ширину блока или его положение.
Интерфейс
Синтаксис¶
/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: unset;
Значения¶
none
- Граница не отображается. Это значение перекрывает свойство
outline-width
, если оно присутствует. dotted
- Линия состоящая из набора точек.
dashed
- Пунктирная линия, состоящая из серии коротких отрезков.
solid
- Сплошная линия.
double
- Двойная линия.
groove
- Создаёт эффект вдавленной рамки.
ridge
- Создаёт эффект рельефной границы.
inset
- Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
- Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
Вид указанных стилей представлен на рис. 1.
Значение по-умолчанию: none
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>