Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON PHP КАК СДЕЛАТЬ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS outline-offset



Свойство outline-offset

CSS свойство outline-offset добавляет пробел между контуром и краем/границей элемента. Пространство между элементом и его контуром является прозрачным.

В следующем примере задается контур размером 15 пикселей за пределами края границы:

Этот параграф имеет контур размером 15 пикселей за пределами границы.

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
Попробуйте сами »

В следующем примере показано, что пространство между элементом и его контуром является прозрачным:

Этот параграф имеет контур размером 15 пикселей за пределами границы.

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
Попробуйте сами »


Практика: outline

Упражнение: outline div

Установите сплошную границу контура размером 5 пикселей для элемента <div>.

<style>
div {
: solid;
: 5px;
}
</style>

<body>
  <div>
   Lorem ipsum dolor sit amet,
   consectetur adipiscing elit,
   sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua.
  </div>
</body>


Все CSS свойства outline

Свойство Описание
outline Сокращенное свойство для настройки ширины контура, стиля контура и цвета контура в одном объявлении
outline-color Задает цвет контура
outline-offset Задает пространство между контуром и краем или границей элемента
outline-style Задает стиль контура
outline-width Задает ширину контура


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- © Copyright. Все права защищены. Schoolsw3 работает на SW3.CSS.