outline-offset в CSS


CSS :: Свойство outline-offset

css -свойство outline-offset (от англ. outline offset – смещение контура) используется для установки смещения контура элемента относительно его границ, тем самым задавая интервал между ними.

Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.

Характеристики

  • Значение по умолчанию: 0 .
  • Применяется: ко всем элементам .
  • Наследуется: нет .
  • Анимируется: да .
  • JavaScript: object.style.outlineOffset=»value» .

Синтаксис

Значения

В качестве значения outline-offset может принимать величину интервала в любых допустимых в CSS единицах измерения (смотреть). Кроме того, допустимо использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента. Проценты использовать не разрешается.

CSS outline-offset Свойство

Пример

Укажите сплошной красный контур на 4 пикселя 15 пикселов за пределами края границы:

Определение и использование

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

Пространство между элементом и его контуром прозрачно.

Контуры отличаются от границ тремя способами:

  • Контур — это линия, обрисованная вокруг элементов, за пределами края границы
  • Контур не занимает место
  • Контур может быть не прямоугольным
Значение по умолчанию:
Inherited: no
Animatable: yes, see individual properties. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.outlineOffset=»15px»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

CSS свойство outline-offset

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

CSS синтаксис


Возможные значения

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

Пример

Устанавливаем, чтобы контур отстоял от элемента на 15px

CSS3 outline-offset Property

Description

The outline-offset CSS property is used to set the space between an outline and the border edge or simply edge of an element.

The following table summarizes the usages context and the version history of this property.

Default value:
Applies to: All elements
Inherited: No
Animatable: yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

The example below shows the outline-offset property in action.

Example

Property Values

The following table describes the values of this property.

Value Description
length Specifies the distance the outline from the border edge. The default value is 0. Negative values place the outline inside the element.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element outline-offset property.

Browser Compatibility

The outline-offset property is supported in all major modern browsers.

CSS: outline-offset alternative for IE?

I’m using the following code for the 2 borders of different colors, and space between the borders. I’m using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9). Is there any alternate solution which works in the IE as well, without adding another div in the html.

HTML:

CSS:

The height and width is not fixed, i have just used for the example.

4 Answers 4

Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements . View it on JSFiddle here.

​ The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.

​ Oh woops, I just saw that you requested leaving just a single div . Well, that first solution fits those requirements!

Some more solutions. I’ve used them successfully:

Restriction of this solution: «outline» property ignores «border-radius» one.


Restriction of this solution: space between red and green borders can’t be transparent because red box-shadow will be visible through it. So, any solid color needed, I’ve set #fff.

My issues with other solutions toward this end:

«outline-offset» is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.

Here is the fix I used to responsively frame images in an IE compatible way:

«outline» defines the outer border, «border» defines the space in between, while the inner border is actually the background color with padding determining its width.

outline-offset

Easily manage projects with monday.com

The outline-offset property in CSS offsets a defined outline from an element’s border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and it will not affect the position or layout of surrounding elements.

Outlines defined using the outline property are often used as focus rings, for accessibility. Thus, the outline-offset property allows you to change the position of the focus ring.

Values

outline-offset accepts one kind of value, a length, which can be:

  • 0 (the default)
  • Any other valid length with a specified unit (including negative values)

Note that outline-offset , like outline-width , does not accept percentage values.

Positioning of the Outline

By default an element’s outline is drawn immediately outside the border (or immediately outside where the border would be drawn if a border was defined). Therefore, it’s technically possible to combine outline and border for a two-border effect:

From there, outline-offset can be used to change the position of the outline relative to the border edge. Try the demo below which allows you to interactively change the outline’s offset value using the slider. The value of the offset is displayed on the page as you move the slider:

As mentioned above, outline-offset accepts negative values, which will offset the outline in the opposite direction (towards the center of the element), as shown in the next interactive demo. Notice the outline starts at -40px:

Note: If you view the above demo in Firefox, you’ll notice the outline appears correct at first but when the slider is adjusted the outline doesn’t render smoothly and ends up in the wrong position. Scrolling the element out of view, then back into view, forces the browser to repaint the outline in the correct position. This seems to be a Firefox-only bug.

Not Part of outline Shorthand

Similar to the border property, the outline property is a shorthand that represents three properties: outline-color , outline-style , and outline-width .

The outline-offset property, therefore, is not represented in this or any other shorthand property, so it needs to be declared separately from the defined outline itself.

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
4 11.6 2 11 15 3.1


Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
3.2 12 No 2.1 78 68

The «partial» indicator for IE means IE does not support outline-offset , but does support outline shorthand and the three properties it represents.

CSS | outline-offset Property

The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element.

An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.

Syntax

Property values:

    length: It is the distance or space between the outline and the border i.e it is the distance the outline is outset from the border edge. It can also have negative value. If length is negative then the outline is placed inside the element. If length is 0 then there is no space between the outline and the element.
    syntax:

СSS3 Свойство outline-offset

Пример

Указать 4 пикселя сплошной красный контур 15 пикселей за пределами края границы:

Определение и использование

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

Пространство между элементом и его контуром прозрачно.

Контуры отличаются от границ тремя способами:

  • Контур — это линия, проведенная вокруг элементов, вне края границы
  • Контур не занимает места
  • Контур может быть непрямоугольным
Значение по умолчанию:
Унаследованный: нет
Анимируемый: да, см. раздел отдельные свойства. Прочитайте о animatable Попробовать
Версия: CSS3
JavaScript синтаксис: object.style.outlineOffset=»15px» Попробовать

Поддержка браузеров

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

Свойство outline

Свойство outline задает цвет, тип и толщину для внешней рамки (границы, которая не занимает места) для всех сторон одновременно.

В отличие от border граница через outline не расширяет элемент: если у элемента задана ширина width в 200px, то при наличии border толщиной в 1px реальная ширина элемента будет 202px (по 1px границы с каждой стороны).

Если же задать границу через outline — то реальная ширина элемента будет по-прежнему 200px. Визуально ширина будет 202px, но все прочие элементы будут вести себя так, как будто границы нет (она даже может налезть на другие элементы) и ширина элемента 200px.

Задание границы outline для конкретной стороны невозможно, только для всех сторон одновременно.

Свойство outline

Свойство outline задаёт дополнительную рамку вокруг элемента, за пределами его CSS-блока. Поддерживается во всех браузерах, IE8+.

Для примера, рассмотрим его вместе с обычной рамкой border :

  • В отличие от border , рамка outline не участвует в блочной модели CSS. Она не занимает места и не меняет размер элемента. Поэтому его используют, когда хотят добавить рамку без изменения других CSS-параметров.
  • Также, в отличие от border , рамку outline можно задать только со всех сторон: свойств outline-top , outline-left не существует.

Так как outline находится за границами элемента – outline -рамки соседей могут перекрывать друг друга:

В примере выше верхняя рамка нижнего элемента находится на территории верхнего и наоборот.

Все браузеры, кроме IE9-, также поддерживают свойство outline-offset , задающее отступ outline от внешней границы элемента:

Ещё раз заметим, что основная особенность outline – в том, что при наличии outline-offset или без него – он не занимает места в блоке.

Поэтому его часто используют для стилей :hover и других аналогичных, когда нужно выделить элемент, но чтобы ничего при этом не прыгало.

Илон Маск рекомендует:  Что такое код about dialog
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL