outline-offset

Avatar of Louis Lazaris
Louis Lazaris

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

CSS 中的 outline-offset 属性通过指定的量将定义的轮廓从元素的边框边缘偏移。 轮廓与边框不同,它不占用页面上的任何空间(例如绝对定位的元素),因此轮廓可以在任何量偏移,并且不会影响周围元素的位置或布局。

.example {
  outline: solid 2px blue;
  outline-offset: 10px;
}

使用 outline 属性定义的轮廓通常用作焦点环,以实现可访问性。 因此,outline-offset 属性允许您更改焦点环的位置。

outline-offset 接受一种类型的值,长度,它可以是

  • 0(默认值)
  • 任何其他具有指定单位的有效长度(包括负值)

请注意,outline-offsetoutline-width 一样,不接受百分比值。

轮廓的定位

默认情况下,元素的轮廓绘制在边框的正外侧(或边框将绘制的位置的正外侧,如果定义了边框)。 因此,从技术上讲,可以将轮廓和边框结合使用以实现双边框效果。

从那里,outline-offset 可用于更改轮廓相对于边框边缘的位置。 尝试下面的演示,它允许您使用滑块交互式地更改轮廓的偏移量值。 当您移动滑块时,偏移值会显示在页面上。

如上所述,outline-offset 接受负值,这将使轮廓朝相反方向(朝元素的中心)偏移,如下一张交互式演示所示。 请注意,轮廓从 -40px 开始。

如果您在 Firefox 中查看上面的演示,您会注意到轮廓最初看起来是正确的,但是当调整滑块时,轮廓不会平滑地渲染,并最终出现在错误的位置。 将元素滚动到视图之外,然后重新滚动到视图内,将迫使浏览器以正确的位置重新绘制轮廓。 这似乎是 Firefox 独有的错误。

不属于 outline 简写

border 属性类似,outline 属性是一个简写,代表三个属性:outline-coloroutline-styleoutline-width

因此,outline-offset 属性不在此简写属性或任何其他简写属性中表示,因此它需要与定义的轮廓本身分开声明。

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本上支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4211153.1

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.13.2

IE 的“部分”指示器表示 IE 不支持 outline-offset,但支持 outline 简写及其代表的三个属性。

除了“轮廓定位”部分中提到的错误之外,Firefox 中还有一个错误,如果元素具有超出父边界(例如使用负边距或绝对定位)的子元素,则轮廓将绘制不正确。 因此,outline-offset 值将相对于溢出子元素创建的扩展边界,而不是原始父元素边界。 要更好地理解这一点,请 查看此 CodePen此 Stack Overflow 线程 以及 此错误报告(感谢读者 Matt Vanes 提供此错误)。