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