CSS outline, cssoutline

CSS outline, cssoutline
* Directory [1] contour style [2] contour width [3] contour color [4] contour offset [5] composite attribute [6] common application prefix

The outline is outside the border. It does not participate in the document flow as the border. Therefore, when the outline appears or disappears, the document flow is not affected, that is, the document is not re-displayed. With the contour, the browser can combine partial outlines to create a continuous but non-rectangular shape. By default, a contour is a dynamic style and is displayed only when the element gets the focus or is activated.

[Note] IE7-not supported by browsers

 

Outline Style

Similar to the border, the most basic aspect of the outline is the style. If a contour has no style, the border will not exist at all. Different from the border, the value is less than a hidden.

Outline-style

Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Initial Value: none

Apply to: All elements

Inheritance: None

 

Contour width

Similar to the border, the contour width cannot be negative or a percentage value.

Outline-width

Value: thin | medium | thick | <length> | inherit

Initial Value: medium

Apply to: All elements

Inheritance: None

[Note] If the profile style is none, the contour width is calculated as 0.

 

Contour color

Different from the border, the contour color has the keyword "invert" Reversed contour, which means that the pixels of the contour are completely reversed, so that the contour can be seen in different background colors. But in fact, the invert keyword is only supported by IE. The outline color of other browsers is the foreground color of the element.

Outline-color

Value: <color> | invert | inherit

Initial Values: invert (IE) and foreground (other browsers)

Apply to: All elements

Inheritance: None

 

Profile offset

The value that defines the offset position of the contour. When the parameter value is a positive value, it indicates that the contour is offset outward. When the parameter value is negative, it indicates that the contour is offset inward.

[Note] Internet Explorer does not support

Outline-offset

Value: length | inherit

Initial Value: 0

Apply to: All elements

Inheritance: None

 

Profile

The outline is similar to the border attribute of the border style, allowing you to set the outline style, width, and color at one time. Because a given profile must adopt a uniform style, width, and color, outline is the only shorthand attribute of the profile. There are no attributes for an outline, such as outline-top or outline-right.

[Note] outline-offset is not included in outline. You must set outline-offset separately.

Outline

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

Initial Value: None

Apply to: All elements

Inheritance: None

 

Application

Because the outline does not affect the box model size of the element and does not affect the page layout, you can use outline to simulate the border effect. But it is not that easy if it is a rounded border.

Firefox supports private attributes-moz-outline-radius to set contour rounded corners. The js method corresponding to this attribute is export outlineradius.

For other browsers, we can use other properties to achieve similar results. The box-shadow and border-radius attributes are the same. That is to say, if the border-radius is a rounded corner, the projection of the box-shadow is also a rounded corner.

<Div class = "show"> test content </div>

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