outline-style

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

Синтаксис

Значения

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       Яндекс Google
 Яндекс Google

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

Рис. 2. Использование свойства outline-style для ссылок

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

[window.]document.getElementById(» elementID «)style.outlineStyle

Источник

outline

The outline CSS shorthand property sets most of the outline properties in a single declaration.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* Global values */ outline: inherit; outline: initial; outline: revert; outline: revert-layer; outline: unset;

The outline property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their initial value.

Note: The outline will be invisible for many elements if its style is not defined. This is because the style defaults to none . A notable exception is input elements, which are given default styling by browsers.

Values

Sets the color of the outline. Defaults to invert for browsers supporting it, currentcolor for the others. See outline-color .

Sets the style of the outline. Defaults to none if absent. See outline-style .

Sets the thickness of the outline. Defaults to medium if absent. See outline-width .

Description

Outline is a line outside of the element’s border. Unlike other areas of the box, outlines don’t take up space, so they don’t affect the layout of the document in any way.

There are a few properties that affect an outline’s appearance. It is possible to change the style, color, and width using the outline property, the distance from the border using the outline-offset property, and corner angles using the border-radius property.

An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.

Accessibility concerns

Assigning outline a value of 0 or none will remove the browser’s default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

Formal definition

outline-color : invert , for browsers supporting it, currentColor for the other
outline-style : none
outline-width : medium

outline-color : For the keyword invert , the computed value is invert . For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0) .
outline-width : an absolute length; if the keyword none is specified, the computed value is 0
outline-style : as specified

outline-color : a color
outline-width : a length
outline-style : by computed value type

Источник

outline-style

The outline-style CSS property specifies the style of an element’s outline. What’s an outline? An is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that element is in focus.

outline-style is a constituent property in the outline shorthand and is defined in the CSS Basic User Interface Module Level 4 specification which is currently in Editor’s Draft status.

By default, different user agents provide different outline styling on focused elements to help indicate non-mouse interactions for accessibility reasons, but that visual is generally beneficial to everyone. This styling is typically an outline around the element. There are some reasons why you would want to change the default outline style:

You can set that style to match your brand.
You can make the outline more noticeable.
You can bring more attention to the user by changing the outline style on the element’s focus.

And this is when outline-styl e comes in handy. But make sure your custom style is, at the very least, as accessible as the default style. That means making it clear and noticeable, while not trying to steer too far that it no longer resembles a focus state. Eric Bailey has a lot of great advice on this in his “Focusing on Focus Styles” article.

outline-style: auto | /* where */ = none | dotted | dashed | solid | double | groove | ridge | inset | outset

/* Keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* Global values */ outline-width: initial; outline-width: inherit; outline-width: unset;

auto : Allows user agents to draw a custom outline style on elements.
none : The default value. Outline is not drawn. The computed value of outline-width is 0 .
dotted : Draws a bunch of round dots around the element.
dashed : Draws square-ended dashes around the element.
solid : A single line wraps around the element.
double : Draws two parallel solid lines along the element’s edge, with space between them. The thickness of the two lines and the gap between them is equal to the outline-width value. The outline-width must be at least 3px wide for the double outline to be visible.
groove : The outline looks like it’s carved in the page. This carved effect usually comes from the color specified using the outline-color property, plus a slightly darker version of it that the browser figures out on its own.
ridge : The opposite of groove , where the outline looks as if it’s coming off of the page.
inset : Gives the element’s box an embedded appearance, as if the content inside of the outline is sinking into the page.
outset : The opposite of inset , giving the element’s box an embossed appearance, as if the content inside of the outline is coming out of the page.
initial : Applies the property’s default setting, which is none .
inherit : Adopts the outline-style value of the parent.
unset : Removes the current outline-style from the element.

The following example makes the outline of the button double once it’s focused:

You can play around this property in the following demo:

Источник

outline-style

outline-style¶

Демо¶

Синтаксис¶

Значения¶

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

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

Описание и примеры¶

outline-style

Синтаксис

Значения

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

outline

Try it

Constituent properties

Syntax

Values

Description

Accessibility concerns

Formal definition

outline-style