Outline offset css: outline-offset | htmlbook.ru – outline-offset | CSS | WebReference

Leave a Comment / Css / By /

Свойство outline-offset | CSS справочник

CSS свойства

Определение и применение

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

Контур не является частью элемента и не влияет на его ширину — свойства элемента width и height не содержат ширину контура.

Поддержка браузерами

CSS синтаксис:

outline-offset:"length | initial | inherit";

JavaScript синтаксис:

object.style.outlineOffset = "5px"

Значения свойства

ЗначениеОписание
lengthУстанавливает пространство между контуром и краем элемента или его границы (при наличии). Значение по умолчанию 0.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример работы с контуром в CSS</title>
<style> 

 
div {
outline : solid medium orange; /* устанавливаем контур средней ширины, тип контура - сплошной, оранжевого цвета */
width : 50px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid black; /* устанавливает сплошную границу размером 2px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin : 50px; /* устанавливаем величину отступа от каждого края элемента в одном объявлении */
}
.test   {outline-offset : 5px;}  /* устанавливаем пространство между контуром и границей элемента */
.test2 {outline-offset : 15px;}  /* устанавливаем пространство между контуром и границей элемента */
.test3 {outline-offset : 2em;}  /* устанавливаем пространство между контуром и границей элемента */
</style>
</head>
	<body>
		<div class = "test">5px</div>
		<div class = "test2">15px</div>
		<div class = "test3">2em</div>
	</body>
</html>
Пример работы со свойством CSS outline-offset (пространство между элементом и контуром).

Свойство outline-offset не поддерживается браузерами Internet Explorer и Edge

CSS свойства

outline-offset | CSS справочник

Поддержка браузерами

Описание

CSS свойство outline-offset сдвигает внешнюю границу на заданное расстояние от края элемента.

Отличия внешней границы от границы элемента:

  • Внешняя граница не увеличивает ширину элемента
  • Внешняя граница может быть не прямоугольной формы
Значение по умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.outlineOffset=»15px»

Синтаксис

outline-offset: величина|inherit;

Значения свойства

Значение Описание
величина Задает величину отступа внешней границы от элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div {
      margin: 20px;
      width: 180px;
      padding: 10px;
      height: 70px;
      border: 2px solid black;
      outline: 2px solid red;
      outline-offset: 15px;
    }
  </style>
</head>
<body>

  <div>Свойство outline-offset задает расстояние между внешней границей
  и краем элемента в 15px.</div>

</body>
</html>

Результат данного примера в окне браузера:

outline-offset

seodon.ru | CSS справочник — outline-offset

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Свойство CSS outline-offset используется для указания расстояния между контуром (outline) и внешним краем рамки элемента (border) или границей элемента, если рамка отсутствует.

Свойство CSS outline-offset — расстояние между рамкой и контуром.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства outline-offset является указание расстояния между границей элемента и контуром одним из следующих способов.

  • Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д.
  • inherit — наследует значение outline-offset от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: 0.

Синтаксис

outline-offset: размер | inherit

Пример CSS: использование outline-offset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство outline-offset</title>
  <style type="text/css">
   div {
   width: 200px; /* ширина блока DIV */
   outline: 5px red outset; /* стили контура */
   border: 5px blue outset; /* стили рамки */
   outline-offset: 10px; /* расстояние между рамкой и контуром */
   margin: 20px; /* внешние поля */
   padding: 5px; /* внутренние отступы */
   }
  </style>
 </head>
 <body>
  <div>Расстояние между рамкой и контуром в этом блоке составляет 10px.</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS outline-offset.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.29.6 и выше3.1 и выше
Поддержка:НетДаДаНетДаДа

Свойство outline | CSS справочник

CSS свойства

Определение и применение

CSS свойство outline устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину — свойства элемента width и height не содержат ширину контура).

Свойства, которые могут быть заданы:

  • outline-style (тип контура).»none (значение по умолчанию) | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit»
  • outline-width (ширина контура).»medium (значение по умолчанию) | thin | thick | length | initial | inherit»
  • outline-color (цвет контура).»invert (значение по умолчанию) | color | initial | inherit»

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически. Особенно это заметно, когда вы не укажете значение outline-style, т.к. значению по умолчанию этого свойства «none», т.е. отсутствие контура.

Поддержка браузерами

CSS синтаксис:

outline:"outline-style outline-width outline-color | initial | inherit";

JavaScript синтаксис:

object.style.outline = "solid medium orange"

Значения свойства

ЗначениеОписание
outline-styleУстанавливает стиль контура элемента. Значение по умолчанию none.
outline-widthЗадает ширину контура элемента. Значение по умолчанию medium.
outline-colorУстанавливает цвет контура элемента. Значение по умолчанию invert.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример работы с контуром в CSS</title>
<style> 
div {
width : 10em; /* устанавливаем ширину блока */
height : 10em; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid white; /* устанавливает сплошную границу размером 2px белого цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
}

 
.test   {outline : solid medium orange;}  /* устанавливаем контур средней ширины, тип контура - сплошной, оранжевого цвета */
.test2 {outline : dotted thin;}  /* устанавливаем контур тонкой ширины, тип контура - точечный */
.test3 {outline : dashed thick #777;}  /* устанавливаем контур жирной ширины, тип контура - пунктир, цвет #777777 (#777) */
</style>
</head>
	<body>
		<div class = "test">solid medium orange</div>
		<div class = "test2">dotted thin</div>
		<div class = "test3">dashed thick #777</div>
	</body>
</html>
Пример работы с контуром в CSS (универсальное свойство outline).CSS свойства

Outline CSS уроки для начинающих академия


Этот элемент имеет черную границу и зеленый контур с шириной 10px.


Структура CSS

Контур представляет собой линию, которая рисуется вокруг элементов, за пределами границ, чтобы сделать элемент «выделиться».

CSS имеет следующие свойства структуры:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; Общая ширина и высота элемента не зависит от ширины контура.

Стиль контура

Свойство outline-style задает стиль структуры и может иметь одно из следующих значений:

  • dotted — Определяет пунктирную структуру
  • dashed — Определяет пунктирную структуру
  • solid — Определяет сплошной контур
  • double — Определяет двойной контур
  • groove — Определяет трехмерную контурную канавку
  • ridge — Определение трехмерного ребристого контура
  • inset — Определяет контур 3D-вставки
  • outset — Определение трехмерного контура начала
  • none — Не определяет структуру
  • hidden — Определяет скрытый контур

В следующем примере показаны различные значения outline-style :

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Пример

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ri

outline | CSS | WebReference

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

  • outline не влияет на размеры и положение самого элемента;
  • outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
  • нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
  • свойство border-radius не действует.

Краткая информация

Значение по умолчаниюНет
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

outline-color
Задаёт цвет линии в любом допустимом для CSS формате.
outline-style
Стиль линии.
outline-width
Толщина границы.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>outline</title> <style> .photo img { padding: 20px; /* Поля вокруг изображения */ margin-right: 10px; /* Отступ справа */ margin-bottom: 10px; /* Отступ снизу */ outline: 1px solid #666; /* Параметры рамки */ background: #f0f0f0; /* Цвет фона */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div> <img src=»image/girl.jpg» alt=»Девочка с муфтой»> <img src=»image/owl.jpg» alt=»Сова»> <img src=»image/boy.jpg» alt=»Эвенкийский мальчик»> </div> </body> </html>

Результат данного примера показан на рис. 1.

Использование свойства outline

Рис. 1. Использование свойства outline

Объектная модель

Объект.style.outline

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 01.03.2019

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

outline-style | CSS | WebReference

Устанавливает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис 

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создаёт эффект вдавленной рамки.
ridge
Создаёт эффект рельефной границы.
inset
Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.

Вид указанных стилей представлен на рис. 1.

Вид границы с разным значением стилей

Рис. 1. Вид границы с разным значением стилей

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>outline-style</title> <style> .noborder a { outline-style: none; /* Убираем границу вокруг ссылок */ } </style> </head> <body> <p><a href=»http://ya.ru»>Яндекс</a> <a href=»http://google.ru»>Google</a></p> <p><a href=»http://ya.ru»>Яндекс</a> <a href=»http://google.ru»>Google</a></p> </body> </html>

В данном примере для браузера убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка ещё будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.

Объектная модель

Объект.style.outlineStyle

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *