Свойство outline-offset
добавляет пространство. между контуром и краем/границей элемента. Пространство между элемент и его контур прозрачен.
В следующем примере указывается контур на расстоянии 15 пикселей от края границы:
This paragraph has an outline 15px outside the border edge.
p {
margin: 30px;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline 15px outside the border edge.</p>
</body>
</html>
В следующем примере показано, что пространство между элементом и его контуром является прозрачным:
This paragraph has an outline of 15px outside the border edge.
p {
margin: 30px;
background:
yellow;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
background:yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline of 15px outside the border edge.</p>
</body>
</html>
Сокращенное свойство для установки ширины контура, стиля контура и цвет контура в одном объявлении
Устанавливает цвет контура
Определяет пространство между контуром и краем или границей элемента.
Устанавливает стиль контура
Устанавливает ширину контура