CSS3 outline-offset property

 The CSS3 outline-offset property is an evolution of the outline property in CSS . Web designers can use the outline property to add outline visual effects to web elements, but the default outline visual effects will stick to the element borders. There are ways to combine the outline with Are the borders separated? Traditional CSS can't do it yet, but the outline-offset property introduced in CSS3 can do it, and web designers can also determine the distance between the outline and the element border by themselves, creating visual effects and actual performance that could not be presented in the past. It will be shown in the example. Except for IE, most other mainstream browsers support the effect of CSS3 outline-offset property.

SS3 outline-offset property syntax

outline-offset: distance and unit;

CSS3 outline-offset properties only need to set the distance to a length, the length of this distance element is represented by a border ( border ) the outline ( Outline distance between), the unit is frequently used px, further outline-offset property may also be Use the inherit attribute value and inherit the outlet-offset attribute value of the parent layer. If you want to use inherit, please find a few more browsers for testing, especially IE browser.

CSS3 outline-offset property example

<style>
#DIV_1{
　width:300px;
　border:2px black solid;
　outline:2px red solid;
　outline-offset:-5px;
　padding:10px;
}
#DIV_2{
　width:300px;
　border:2px black solid;
　outline:2px red solid;
　outline-offset:0px;
　margin-top:20px;
　padding:10px;
}
#DIV_3{
　width:300px;
　border:2px black solid;
　outline:2px red solid;
　outline-offset:10px;
　margin-top:30px ;
　padding:10px;
}
</style>
<div id="DIV_1">The outline-offset of this DIV block is set to -5px</div>
<div id="DIV_2"> The outline-offset of this DIV block Set to 0px</div>
<div id="DIV_3">The outline-offset of this DIV block is set to 10px</div>

The actual effect of the example

The outline-offset of this DIV block is set to -5px

The outline-offset of this DIV block is set to 0px

The outline-offset of this DIV block is set to 10px

In the example, we prepared three DIV blocks and set different CSS3 outline-offset property effects. The first DIV block set the outline-offset to -5px, so the outline runs inside the border of the DIV block , But this should not be the normal usage of the outline, it is just for you to see. The second DIV block sets the outline-offset to 0px. This effect is the same as if it is not written, so it is just for your reference. The outline-offset of the three DIV blocks is set to 10px. It is obvious that the outline is 10px away from the black border of the DIV block itself. This is the real purpose of the CSS3 outline-offset property.

Remarks, CSS3 outline-offset property is usually used together with outline property.