outline-offset

**outline-offset** CSS 属性设置元素的 轮廓 与其边缘或边框之间的间距。

试一试

语法

css
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

值

<length>

元素与其轮廓之间的间距宽度。负值将轮廓放置在元素内部。值为 0 将轮廓放置在与其和元素之间没有间距的位置。

描述

轮廓是在元素周围绘制的一条线，位于边框边缘之外。元素与其轮廓之间的空间是透明的。换句话说，它与父元素的背景相同。

正式定义

初始值0
应用于所有元素
继承否
计算值按指定方式，但将相对长度转换为绝对长度
动画类型一个

正式语法

outline-offset = 
  <length>

示例

以像素为单位设置轮廓偏移量

HTML

html
<p>Gallia est omnis divisa in partes tres.</p>

CSS

css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

结果

规范

规范
CSS 基本用户界面模块级别 4
# outline-offset

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅