DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!
CSS 中的 outline-offset
属性通过指定的量将定义的轮廓从元素的边框边缘偏移。 轮廓与边框不同,它不占用页面上的任何空间(例如绝对定位的元素),因此轮廓可以在任何量偏移,并且不会影响周围元素的位置或布局。
.example {
outline: solid 2px blue;
outline-offset: 10px;
}
使用 outline
属性定义的轮廓通常用作焦点环,以实现可访问性。 因此,outline-offset
属性允许您更改焦点环的位置。
值
outline-offset
接受一种类型的值,长度,它可以是
0
(默认值)- 任何其他具有指定单位的有效长度(包括负值)
请注意,outline-offset
与 outline-width
一样,不接受百分比值。
轮廓的定位
默认情况下,元素的轮廓绘制在边框的正外侧(或边框将绘制的位置的正外侧,如果定义了边框)。 因此,从技术上讲,可以将轮廓和边框结合使用以实现双边框效果。
从那里,outline-offset
可用于更改轮廓相对于边框边缘的位置。 尝试下面的演示,它允许您使用滑块交互式地更改轮廓的偏移量值。 当您移动滑块时,偏移值会显示在页面上。
如上所述,outline-offset
接受负值,这将使轮廓朝相反方向(朝元素的中心)偏移,如下一张交互式演示所示。 请注意,轮廓从 -40px 开始。
如果您在 Firefox 中查看上面的演示,您会注意到轮廓最初看起来是正确的,但是当调整滑块时,轮廓不会平滑地渲染,并最终出现在错误的位置。 将元素滚动到视图之外,然后重新滚动到视图内,将迫使浏览器以正确的位置重新绘制轮廓。 这似乎是 Firefox 独有的错误。
outline
简写
不属于 与 border
属性类似,outline
属性是一个简写,代表三个属性:outline-color
、outline-style
和 outline-width
。
因此,outline-offset
属性不在此简写属性或任何其他简写属性中表示,因此它需要与定义的轮廓本身分开声明。
相关
更多信息
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本上支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2 | 11 | 15 | 3.1 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1 | 3.2 |
IE 的“部分”指示器表示 IE 不支持 outline-offset
,但支持 outline
简写及其代表的三个属性。
除了“轮廓定位”部分中提到的错误之外,Firefox 中还有一个错误,如果元素具有超出父边界(例如使用负边距或绝对定位)的子元素,则轮廓将绘制不正确。 因此,outline-offset
值将相对于溢出子元素创建的扩展边界,而不是原始父元素边界。 要更好地理解这一点,请 查看此 CodePen、此 Stack Overflow 线程 以及 此错误报告(感谢读者 Matt Vanes 提供此错误)。