Offset css: offset — CSS: Cascading Style Sheets

css властивість outline-offset

• Головна
• css
• властивості
• outline-offset

Властивість outline-offset встановлює відстань між контуром та кордоном елемента (властивість border).

Без задання контури розташовані безпосередньо біля краю кордону. Використовуючи outline-offset, ви можете ромістити за межами кордону.

Простір між елементом та його контуром прозорий; іншими словами, той же самий, що і фон батьківського елемента.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

outline-offset: length|initial|inherit;

Властивість outline-offset може отримувати 3 значення:

length

Задає між контуром та кордоном елемента. Від’ємне значення відобразить контур всередині елемента, додатнє — навколо елемента.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

Значення у дії

 Приклад використання
Встановлює відстань в 15px
div {


    border: 2px solid black;


    outline: 2px solid red;


    outline-offset: 15px;


}


 Встановлює відстань в 15px
div { 


  border: 2px solid black; 


  outline: 2px solid red; 


  outline-offset: 15px; 


} 
Додаткові посилання
box-sizing
content
cursor
outline-color
resize
outline
nav-down
nav-index
nav-left
nav-right
nav-up
outline-style
text-overflow
outline-width
 Свойство CSS layout-offset 
 ❮ Предыдущий
Полное руководство по CSS
Далее ❯
 
 Пример 
 Укажите сплошной красный контур толщиной 4 пикселя, расположенный на 15 пикселях за границей границы:
 div
 { 
   контур: сплошной красный, 4 пикселя; 
   смещение контура: 15 пикселей; 
 }
 Попробуйте сами »
 Определение и использование 
 контур и край или
граница элемента.
 Пространство между элементом и его контуром прозрачно.
  Контуры отличаются от границ тремя способами:
 Контур — это линия, нарисованная вокруг элементов за пределами края границы
 Контур не занимает места
 Контур может быть непрямоугольным
 Показать демо ❯
 Значение по умолчанию:
 0
 Унаследовано:
 нет
 Анимация:
 да,  см. индивидуальные свойства  . Читать про  анимированный  Попробуй
 Версия:
 CSS3
 Синтаксис JavaScript:
  объект  .style.outlineOffset=»15px»
Попробуй
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
 Собственность
 
 контур-смещение
 4,0
 15,0
 3,5
 3. 1
 10,5
 Синтаксис CSS 
 layout-offset:  length  |initial|inherit;
 Значения свойств 
 Значение
 Описание
 Демо
  длина 
 Расстояние отступа контура от края границы. Значение по умолчанию 0
 Демонстрация ❯
 начальный
 Устанавливает для этого свойства значение по умолчанию. Читать про  начальный 
 унаследовать
 Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Связанные страницы 
 Учебник по CSS: Пользовательский интерфейс CSS
  
 Ссылка на HTML DOM: свойство layoutOffset
 ❮ Предыдущая
Полное руководство по CSS
Далее ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебник HTML 
 Учебник CSS 
 Учебник JavaScript 
 How To Tutorial 
 Учебник SQL 
 Учебник Python 
 Учебник W3. CSS 
 Учебник Bootstrap 
 Учебник PHP 
 Учебник Java 
 Учебник C++ 
 Учебник jQuery 
 900
Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.CSS 
 Справочник по Bootstrap 
 Справочник по PHP 
 Цвета HTML 
 Справочник по Java 
 Справочник по Angular 
 Справочник по jQuery 
 Лучшие примеры 
 Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 
  Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 Смещение контура CSS 
 ❮ Предыдущий
Далее ❯
 Смещение контура CSS 
 Свойство -смещение контура  добавляет пробел
между контуром и краем/границей элемента. Пространство между
элемент и его контур прозрачен.
 В следующем примере определяется контур на 15 пикселей за пределами края границы:
  
 Этот абзац имеет контур на 15 пикселей за пределами границы.
 Пример 
 p { 
   margin: 30px; 
   граница: 1 пиксель сплошной черный; 
   схема:
 1 пиксель сплошной красный; 
 смещение контура: 15 пикселей; 
 }
 Попробуйте сами »
 В следующем примере показано, что пространство между элементом и его контуром
прозрачный:
 Этот абзац имеет контур 15 пикселей за пределами границы.
 Пример 
 p { 
   margin: 30px; 
   фон:
 желтый; 
   граница: 1 пиксель сплошной черный; 
   схема:
 1 пиксель сплошной красный; 
 смещение контура: 15 пикселей; 
 }
 Попробуйте сами »
 Проверьте себя с помощью упражнений 
 Упражнение: 
 Установите сплошную границу размером 5 пикселей с контуром   для элемента
 .
<стиль>
дел {
  : твердый;
  : 5 пикселей;
}

<тело>
<дел>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor инцидент
ut Labore et dolore magna aliqua.


 
 Начать упражнение
 Все свойства структуры CSS 
 Свойство
 Описание
 контур
 Сокращенное свойство для установки ширины контура, стиля контура и
 контур-цвет в одном объявлении
 цвет контура
 Задает цвет контура
 контур-смещение
 Указывает пространство между контуром и краем или границей элемента
 контурный стиль
 Устанавливает стиль контура
 ширина контура
 Устанавливает ширину контура
 ❮ Предыдущий
Следующий ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебник HTML 
 Учебник CSS 
  Учебник JavaScript 
 How To Tutorial 
 Учебник SQL 
 Учебник Python 
 Учебник W3. CSS 
 Учебник Bootstrap 
 Учебник PHP 
 Учебник Java 
 Учебник C++ 
 Учебник jQuery 
 Основные ссылки 
 HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
7 Top0 Examples
Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.