outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

尝试一下

outline-offset: 4px;

outline-offset: 0.6rem;

outline-offset: 12px;
outline: 5px dashed blue;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  border: 2px solid crimson;
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

语法

css

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

/* 全局值 */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

值

<length>: 元素与其轮廓线之间的间距宽度。负值会将轮廓线置于元素内部。当值为 0 时，轮廓线与元素之间没有间距。

描述

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

形式定义

初始值	`0`
适用元素	所有元素
是否是继承属性	否
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a length

形式语法

outline-offset = 
  <length>

示例

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

HTML

html

<p>这是一段文本，这是一段文本。</p>

CSS

css

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

结果

规范

Specification
CSS Basic User Interface Module Level 4 # outline-offset