CSS свойство outline
Контур (outline) — это линия, которая рисуется за пределами границ элемента. Она одинакова со всех сторон. Свойство outline является сокращённой записью для:
Свойство outline-color не работает, если используется отдельно, поскольку значение по умолчанию для outline-style — none. Контур не занимает место и не влияет на размеры макета элемента.
Контур vs. Граница
Контур и граница похожи, но между ними есть много различий. В отличие от границ, контуры строго прямоугольные и не могут быть скруглены с помощью свойства border-radius. Свойство outline рисует одну линию за пределами края границы элемента. Контур не занимает место, так как находится за пределами содержимого элемента.
| Начальное значение | medium none currentcolor |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Да. Контур элемента можно анимировать. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.outline = "#eee dashed 10px"; |
Синтаксис
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Пример использования свойства outline:
Пример кода CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Результат
В приведённом примере стиль контура первого элемента — dotted (пунктирный), а второго — dashed (штриховой).
В следующем примере у первого элемента нет границы, а у второго она есть. Обратите внимание, что контур второго элемента находится за пределами его границы:
Пример свойства outline для элемента с границей:
CSS outline и border вместе, пример
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>В следующем примере контур находится за пределами границы второго элемента.
Пример свойства outline-color в сочетании с outline-style:
Пример кода CSS outline, цвет
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| outline-width | Определяет ширину контура. |
| outline-style | Определяет стиль контура. |
| outline-color | Устанавливает цвет контура. |
| outline-offset | Смещает контур от края границы. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что верно относительно свойства CSS Outline?