轮框偏移 | outline-offset
outline-offset
outline-offsetCSS 属性用于设置outline与一个元素边缘或边框之间的间隙。轮廓是围绕边界外的元素绘制的线条。元素与其轮廓之间的空间是透明的; 换句话说，它与父元素的背景相同。
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
| 初始值 | 0 |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | no |
| 适用媒体 | visual, interactive |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
<length>元素和轮廓之间的空间宽度。负值将轮廓放入元素中。0放置轮廓的值使其与元素之间没有空间。
正式语法
<length>
示例
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
<p>Gallia est omnis divisa in partes tres.</p>
规范
| Specification | Status | Comment |
|---|---|---|
| CSS TransitionsThe definition of 'outline-offset' in that specification. | Working Draft | Defines outline-offset as animatable. |
| CSS Basic User Interface Module Level 3The definition of 'outline-offset' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8) | No support | 9.5 | 1.2 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
