详细理解CSS中的outline

在 CSS 中，outline 属性可以用来给 HTML 元素添加轮廓线。这个属性通常用于指示用户当前选中了哪个元素，或者作为键盘导航时的可访问性工具。

基本语法

outline 属性有三个可选值：

• outline-width：轮廓线的宽度，默认为 medium
• outline-style：轮廓线的样式，默认为 none
• outline-color：轮廓线的颜色，默认为当前文字颜色

可以通过以下方式设置 outline 属性：

-- -------------------- ---- -------
-- ---- - ------ --
- -
  -------- --- ------ ----
-

-- ---------------- --
------ -
  -------------- ----
  -------------- -------
  -------------- -----
-
展开代码

与 border 的区别

虽然 outline 属性看起来很像 border，但它们之间有一些重要的区别：

1. outline 不占据空间：outline 不会增加元素的大小或改变排列位置。这意味着即使将 outline 设置为很大的值，也不会影响页面布局。

2. outline 不支持圆角：与 border-radius 不同，outline 不支持圆角。如果你需要在元素周围添加圆角的轮廓线，需要将其设置为边框。

3. outline 可以居于元素之上：outline 总是在元素的前面显示，不受 z-index 影响。这意味着即使父级元素设置了 overflow: hidden，outline 也会超出该区域。

实际应用

1. 改变链接被选中时的样式

可以使用 :focus 伪类和 outline 属性来改变链接被选中时的样式：

a:focus {
  outline: 2px solid blue;
}

2. 对键盘焦点进行指示

当用户使用键盘导航时，可以使用 :focus 焦点状态和 outline 属性来指示当前聚焦的元素：

/* 设置所有可聚焦元素的轮廓线 */
:focus {
  outline: 2px dotted black;
}

3. 给图像添加焦点轮廓线

如果网站包含大量图像，并且希望在使用键盘浏览器时能够看到图像的焦点位置，则可以给 img 标签添加 outline 属性：

img:focus {
  outline: 2px dashed gray;
}

总结

outline 属性在前端开发中有很多实际用途，例如改变链接被选中时的样式，对键盘焦点进行指示，或给图像添加焦点轮廓线。需要注意的是，outline 与 border 之间有很多区别，必须理解这些区别才能正确使用该属性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44224