CSS Outline Offset (Смещение контура)
Между краем или границей элемента и его контуром outline-offset вставляет прозрачное пространство.
Контур на 15px снаружи границы
Здесь контур отделён от края границы на 15px снаружи.
Prompt
HTML-страница, использующая outline-offset, чтобы отделить контур от границы.
Во внутреннем блоке
<style> задайте абзацу margin 30px, padding 5px, сплошную чёрную границу 1px, сплошной красный контур 3px и outline-offset 15px. Добавьте абзац.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline 15px outside the border edge.</p>
</body>
</html>
Прозрачный зазор
Поскольку это пространство прозрачное, жёлтый фон до него не доходит, и между границей и контуром остаётся видимый зазор.
Prompt
HTML-страница, показывающая, что пространство между границей элемента и его контуром прозрачно.
Во внутреннем блоке
<style> задайте абзацу margin 30px, padding 5px, жёлтый фон, сплошную чёрную границу 1px, сплошной красный контур 3px и outline-offset 15px. Жёлтый фон не заполняет зазор от offset, показывая, что он прозрачный. Добавьте абзац.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has an outline 15px outside the border edge. The gap is transparent.</p>
</body>
</html>
CSS Outline Offset с отрицательным значением
Задайте outline-offset отрицательное значение, и контур переместится на внутреннюю сторону края границы.
Пример
При -5px красный контур находится на 5px внутрь от края границы.
Prompt
HTML-страница, использующая отрицательный outline-offset, чтобы контур располагался внутри края границы.
Во внутреннем блоке
<style> задайте абзацу margin 30px, padding 5px, жёлтый фон, сплошную чёрную границу 1px, сплошной красный контур 3px и outline-offset -5px. Добавьте абзац.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline -5px inside the border edge.</p>
</body>
</html>
Все свойства CSS Outline
Свойства контура вкратце:
outline— одно объявление дляoutline-width,outline-styleиoutline-color.outline-color— цвет, которым рисуется контур.outline-offset— расстояние от края или границы элемента до его контура.outline-style— какой стиль использует контур.outline-width— какова ширина контура.