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 2017年4月.
尝试一下
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">
这是一个带有轮廓线框的盒子。
</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时，轮廓线与元素之间没有间距。
描述
轮廓线是绘制在元素周围、边框边缘之外的一条线。元素与其轮廓线之间的空间是透明的。换句话说，它与父元素具有相同的背景。
形式定义
形式语法
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 |
浏览器兼容性
Loading…