Контур — это линия, нарисованная за пределами границы элемента.
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>
</body>
</html>
Контур — это линия, которая рисуется вокруг элементов ВНЕ границ, чтобы элемент «выделился».
CSS имеет следующие свойства структуры:
outline-style
outline-color
outline-width
outline-offset
outline
Примечание. Контур отличается от границ! В отличие от границы, контур нарисовано за пределами границы элемента и может перекрывать другое содержимое. Кроме того, схема НЕ является частью размеров элемента; общая ширина и высота элемента не зависит от ширины контура.
Свойство outline-style
определяет стиль контура. и может иметь одно из следующих значений:
- Определяет пунктирный контур
- Определяет пунктирный контур
- Определяет сплошной контур
- Определяет двойной контур
- Определяет трехмерный рифленый контур.
- Определяет трехмерный ребристый контур.
- Определяет контур 3D-вставки
- Определяет начальный 3D-контур.
- Не определяет контур
- Определяет скрытый контур
В следующем примере показаны различные значения outline-style
:
Демонстрация различных стилей контуров:
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;}
Результат :
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
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;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<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. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
Примечание. Ни одно из других свойств структуры (о которых вы узнаете больше в следующих главах) не будет иметь НИКАКОГО эффекта, если только Свойство class="w3-codespan">outline-style
установлено!