CSS outline property example

 CSS outline refers to the outer border (outline) of the element. The area occupied by the element can be expanded through the setting of the outline property. It is similar to CSS border-style , but the effect is somewhat different. CSS outline is a bit more vernacular. The argument can be said to be the contour line, and the difference will be known by comparing the two writing methods later.

CSS outline syntax rules

outline: outline color outline style outline thickness;

Among them, there is a space separating the outline color, outline style and outline thickness, and it is not necessary to write all of them.

Comparison of differences in CSS outline setting

<div style="background-color:#D4D4F8;width:300px;height:150px;"></div>
<div style="background-color:#D4D4F8;width:300px;height:150px; outline:#FA8000 dashed 5px; "></div>

Present results

From the result of the example above, we can find that we set two < div > blocks, their sizes are the same, but the lower < div > block is added with the CSS outline attribute, which is the red piece of code. So there is an extra outline, and the outline makes the overall size look one size larger than the original (IE browser may not see the difference).

Browser support for CSS outline

We have just tested several mainstream browsers, including Google Chrome, FireFox, Opera, Safari and IE 8. We found that in addition to IE 8, other browsers can directly support CSS outline. Attributes, IE needs to be processed in other ways, and I don’t know if future updated versions can directly support it.

CSS outline property collocation function

CSS3 has introduced a collocation function especially for the outline property, called the outline-offset property. The purpose of this function is to set the distance between the element border and the outline to create different visual effects. For detailed usage, please refer to Special introduction of " CSS3 outline-offset property ".