CSS3 outline-offset 属性
CSS3 outline-offset 属性
CSS3 outline-offset属性用于设置外部边框(outline)与元素边缘的偏移量。外部边框通常是一条线,但是通过设置偏移量可以使其不完全重合在元素边缘上。
语法:
outline-offset: length|initial|inherit;
- length:设置外部边框与元素边缘的偏移量。
- initial:设置属性为它的默认值。
- inherit:从父元素继承属性。
值:
- length:正值将越过边界向外扩展,负值将越过边界向内扩展。
- initial:默认值是0px。
- inherit:从父元素继承该属性。
实例:
下面就是设置了outline-offset的一些实例。
<div id="example">
这是一个示例文本
</div>
#example {
width: 200px;
height: 200px;
background-color: #e8e8e8;
outline: 2px solid red;
outline-offset: 10px;
}
属性说明:
outline-offset属性影响外部边框的大小和样式,用于对外部边框进行微调。它允许用户指定外部边框与元素边缘的距离,不实际改变元素大小或位置。
outline-offset属性仅影响外部边框,而不影响元素内部和内部边框。此外,尽管设置为负值可以将外部边框在元素内部被倒映,但它不会真正地覆盖元素。因此,outline-offset属性可以用于创建特殊效果,如卡片和边缘倒角。
兼容性:
浏览器兼容性如下:
参考:
CSS outline-offset 属性:https://www.w3school.com.cn/cssref/pr_outline-offset.asp
CSS3 outline-offset 属性:https://www.runoob.com/cssref/css3-pr-outline-offset.html