outline-offset

概要

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

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

初始值0
适用元素all elements
是否是继承属性
适用媒体as each of the properties of the shorthand:
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

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

Browser compatibility

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!

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 ? ? ? ? ?