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
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
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 | <length> | 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 0Outline 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 itselfoutline-color Value: <color> | invert | inherit Initial value: invert (IE), foreground color (other browsers) Applies to: all elements Inheritance: NoneContour 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: [<outline-color> || <outline-style> || <outline-width>] | inherit
Initial value: None
Applies to : All elements
Inheritance: None
Instance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓案例</title>
<style>
p {border:1px solid yellow;}
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:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
</body>
</html>
