CSS Outline (Контур)
Контур (outline) — это линия, рисуемая вокруг элемента, снаружи от его границы (border), чтобы выделить элемент.
В CSS есть следующие свойства контура:
outline-style— задаёт стиль контура.outline-color— задаёт цвет контура.outline-width— задаёт ширину контура.outline-offset— добавляет отступ между контуром и краем или границей элемента.outline— сокращённое свойство для остальных.
Примечание: Контур отличается от границы (border). Контур рисуется снаружи границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размера элемента, поэтому общая ширина и высота элемента не зависят от контура.
Свойство outline-style
Свойство outline-style задаёт стиль контура. Оно может принимать одно из следующих значений: dotted, dashed, solid, double, groove, ridge, inset, outset, none или hidden.
Пример
Каждый абзац показывает разный стиль контура.
Prompt
HTML-страница, демонстрирующая различные значения outline-style.
Во внутреннем блоке
<style> создайте классы абзацев для каждого стиля контура: dotted, dashed, solid, double, groove, ridge, inset, outset, none и hidden. Добавьте абзацам отступ (padding), чтобы контуры были видны. Добавьте подписанный абзац для каждого.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
padding: 5px;
outline-color: green;
}
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;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}
</style>
</head>
<body>
<p class="dotted">A dotted outline.</p>
<p class="dashed">A dashed outline.</p>
<p class="solid">A solid outline.</p>
<p class="double">A double outline.</p>
<p class="groove">A groove outline.</p>
<p class="ridge">A ridge outline.</p>
<p class="inset">An inset outline.</p>
<p class="outset">An outset outline.</p>
<p class="none">No outline.</p>
<p class="hidden">A hidden outline.</p>
</body>
</html>
Все свойства CSS Outline
Сводка свойств контура:
outline— задаёт все свойства контура в одном объявлении.outline-color— задаёт цвет контура.outline-offset— задаёт отступ между контуром и краем или границей элемента.outline-style— задаёт стиль контура.outline-width— задаёт ширину контура.