Detailed explanation of CSS outline usage

Previous words

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 re-opened. show. With outlines, the browser can merge partial outlines to create a continuous but non-rectangular shape. By default, outline is a dynamic style that is only rendered when the element gets focus or is activated

[Note] IE7-browser does not support

Outline style

Similar to borders, the most basic aspect of outlines is style. If an outline had no style, outline would not exist at all. Different from the border, the value is missing one 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 | | inherit

Initial value: medium

Applies to: all elements

Inheritance: None

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

Outline color

Different from the border, the outline color has the keyword invert to invert the outline, which represents Completely invert the color of the pixels where the outline is located, making 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 contour is shifted outward; when the parameter value is a negative value, it means the contour is shifted inward

[Note] IE browser does not support

outline-offset

Value: length | inherit

Initial value: 0

Applies to: all elements

Inheritance: None

Outline

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

Application

Because the outline does not affect the box model size of the element, it does not affect the page layout , so you can use outline to imitate the border effect. But if it is rounded border it is not so easy to handle.

Firefox browser supports the private property -moz-outline-radius to set the outline rounded corners. The js writing method corresponding to this attribute is MozOutlineRadius

. For other browsers, we can use other attributes to achieve similar effects. The box-shadow and border-radius properties have the same origin, that is to say, if the border-radius is rounded, the projection of box-shadow is also rounded

<p class="show">测试内容</p>

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

The above is the detailed content of Detailed explanation of CSS outline usage. For more information, please follow other related articles on the PHP Chinese website!