Home > Article > Web Front-end > How to use css outline-offset property
How to use css outline-offset property
- 青灯夜游Original
- 2019-05-29 13:16:283368browse
css outline-offset property is used to set the offset of the outline frame outside the border edge, that is, the distance between the outline and the border edge. Basic syntax: outline-offset:length, the unit of length can be an absolute unit (such as px) or a relative unit (such as: %).
How to use the css outline-offset property?
outline-offset property offsets the outline and draws it at the edge of the border.
Note: Outlines differ from borders in two ways: outlines do not take up space, and outlines may be non-rectangular.
Syntax:
outline-offset: length|inherit;
Attribute value:
● Length: The distance between the outline and the edge of the border.
● Inherit: Specifies that the value of the outline-offset attribute should be inherited from the parent element.
Note: All major browsers support the outline-offset attribute, except Internet Explorer.
css outline-offset property example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>
<div>这个 div 在黑色边框边缘之外 15 像素处有一个红色的轮廓。</div>
</body>
</html>Rendering:
The above is the detailed content of How to use css outline-offset property. For more information, please follow other related articles on the PHP Chinese website!