Home > Article > Web Front-end > Detailed explanation of CSS outline usage
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
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
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Initial value: none
Applies to: all elements
Inheritance: none
Similar to the border, the outline width cannot be negative, nor can it be specified as a percentage value
Values: thin | medium | thick |
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
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.
Value:
Initial value: invert (IE), foreground color (other browsers)
Applies to: all elements
Inheritance: None
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
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: [
Initial value: None
Applies to : All elements
Inheritance: None
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!