Смещение контура CSS


Оглавление

    Показать оглавление


Смещение контура CSS

Свойство 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>





Все свойства структуры CSS

outline

Сокращенное свойство для установки ширины контура, стиля контура и цвет контура в одном объявлении

outline-color

Устанавливает цвет контура

outline-offset

Определяет пространство между контуром и краем или границей элемента.

outline-style

Устанавливает стиль контура

outline-width

Устанавливает ширину контура