CSS outline

The outline is outside the border of the border. It does not participate in the document flow like the border. Therefore, when the outline appears or disappears, it will not affect the document flow, that is, it will not cause the document to be redisplayed.

The outline (outline) is a line drawn around the element, located outside the edge of the border, which can highlight the element.

Outline style

Similar to the border, the outline is the most The fundamental aspect is style, if an outline had no style, the outline would not exist at all. Different from the border, the value is one less hidden

outline-style

Initial value: none

Applies to: all elements

Inheritance: None

##Outline width

Similar to the border, the outline width cannot be negative, nor can it be specified as a percentage value

outline-width

Values: thin | medium | thick | | inherit

Initial value: medium

Applies to: all elements

Inheritance: None

[Note] If the outline style is none, the outline width is calculated The value is 0

Outline Color

Different from the border, the outline color has the keyword invert to invert the outline, which means to completely invert the color of the pixel where the outline is located, so that the outline Visible in different background colors. But in fact, the invert keyword is only supported by IE browser. The outline color of other browsers is the foreground color of the element itself

outline-color

Value: | invert | inherit

Initial value: invert (IE), foreground color (other browsers)

Applies to: all elements

Inheritance: None

Contour offset

Contour offset is used to define the value of the offset position of the contour. When the parameter value is a positive number, it means that the outline is offset outward; when the parameter value is a negative value, it means the outline is offset inward

　[Note] IE browser does not support

outline -offset

Value: length | inherit

Initial value: 0

Applies to: all elements

Inheritance: None

Outline abbreviation

The outline outline is similar to the border attribute of the border style, allowing the outline style, width and color to be set at once. Because a given outline must adopt some uniform style, width, and color, outline is the only shorthand property for outlines. There are no attributes such as outline-top or outline-right for outline

[Note]outline does not include outline-offset, and outline-offset needs to be set separately

outline

Value: [ || || ] | inherit

Initial value: None

Applies to : All elements

Inheritance: None

Instance:

轮廓案例

点线轮廓

虚线轮廓

实线轮廓

双线轮廓