outline-offset

概要

outline-offset CSS 属性用于设置 outline 与一个元素边缘或边框之间的间隙。

outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

初始值	`0`
适用元素	all elements
是否是继承属性	否
计算值	as specified, but with relative lengths converted into absolute lengths
Animation type	a length

The space will be transparent (the parent will determine the background).

Syntax

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

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

Values

<length>: 元素和轮廓间的宽度. 详见 <length> . 负值将轮廓绘制在元素之内.

Formal syntax

<length>

Examples

p {
  outline: dashed thin;
  /* Move the outline 10px away from the border */
  outline-offset: 10px;
  border:1px solid black;
}

Html

<p>outline: offset 10px. Border is solid and outline is dashed</p>

上面的代码将产生以下效果:

另一个例子:

outline: multiple offsets;

Specifications

Specification	Status	Comment
CSS Transitions outline-offset	Working Draft	Defines `outline-offset` as animatable.
CSS Basic User Interface Module Level 3 outline-offset	Recommendation	Initial definition

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)	未实现	9.5	1.2

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?