CSS3 outline-offset 属性

outline-offset 属性用于设置轮廓线与边框之间的距离。轮廓线是一种不占用空间的边框，通常用于突出显示元素的外边缘。

语法

selector {
  outline-offset: length|initial|inherit;
}

• length：指定轮廓线与边框之间的距离，可以为正数、负数或零。
• initial：设置属性为默认值。
• inherit：继承父元素的值。

值

• <length>：指定距离，可以为正数、负数或零。常用单位有 px、em、rem 等。
• initial：设置属性为默认值。
• inherit：继承父元素的值。

示例

// www.javascriptcn.com code example
div {
  border: 2px solid black;
  outline: 2px solid red;
  outline-offset: 10px;
}

button {
  border: 1px solid blue;
  outline: 1px dashed green;
  outline-offset: -5px;
}

在上面的示例中，第一个 div 元素的轮廓线与边框之间的距离为 10px，而第二个 button 元素的轮廓线与边框之间的距离为 -5px。

注意事项

• outline-offset 属性仅适用于具有轮廓线的元素，如果元素没有设置轮廓线，则该属性不会生效。
• 不同浏览器对于 outline-offset 的支持程度有所差异，建议在使用时进行兼容性测试。

以上就是关于 outline-offset 属性的介绍，希望能够帮助你更好地掌握 CSS 样式表的知识。