CSS Contour Outline Usage

Previous words

Contour Outline is outside the border boundary, it does not participate in the document flow like a border, so the outline does not affect the flow of the document when it appears or disappears, that is, does not cause the document to be re-displayed. With outlines, the browser can merge parts of the contour to create a continuous, but non-rectangular shape. By default, the contour is a dynamic style that is rendered only when the element gets to the focus or is activated

Note Ie7-Browser does not support

Outline Style

Similar to borders, the most basic aspect of a contour is style, and if a contour has no style, the outline will not exist at all. Unlike a border, the value is less than one hidden

Outline-style

Value: none | Dotted | Dashed | Solid | Double | Groove | Ridge | Inset | Outset | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

Contour Width

Similar to borders, contour widths cannot be negative, nor can they be specified as percent values

Outline-width

Value: Thin | Medium | Thick | <length> | Inherit

Initial value: Medium

Applies to: all elements

Inheritance: None

[note] If the style of the contour is none, the contour width is calculated as a value of 0

Outline Color

Unlike borders, the contour color has the keyword invert inverse color profile, which represents the full inverse color conversion of the pixel in which the contour is located, making the contour visible in different background colors. But in fact the INVERT keyword is only supported by IE browser, the contour color of other browsers is the foreground color of the element itself

Outline-color

Value: <color> | Invert | Inherit

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

Applies to: all elements

Inheritance: None

Contour Offset

The contour offset is used to define the value of the offset position of the contour. When the parameter value is positive, the contour is offset outward, and when the parameter value is negative, the contour is inward offset

Note IE Browser does not support

Outline-offset

Value: Length | Inherit

Initial value: 0

Applies to: all elements

Inheritance: None

Contour

Contour Outline is similar to the border property of a border style, allowing the setting of outline style, width, and color to be completed one time. Because a given contour must adopt a uniform style, width, and color, outline is the only shorthand attribute on the contour. There are no attributes such as Outline-top or Outline-right for outlines

[Note that Outline-offset is not included in the]outline and needs to be set separately for Outline-offset

Outline

Value: [<outline-color> | | <outline-style> | | <outline-width>] | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

Application

Because contour outline does not affect the size of the box model of the element, it does not affect the layout of the page, so you can use outline to mimic the border border effect. But if it's a rounded border, it's not that good.

The Firefox browser supports the private property-moz-outline-radius to set the outline fillet. This property corresponds to the JS notation is Mozoutlineradius

For other browsers, we can use other properties to achieve similar effects. Box-shadow and Border-radius attribute same strain, that is, if the Border-radius is rounded, the Box-shadow projection is also rounded

<p class= "show" > Test content </p>

.show{margin:50px;    width:100px;    height:100px;    Background-color:pink;    border-radius:1px; box-shadow:0 0 0 30px lightblue;}