CSS 框阴影与轮廓

Question

我找不到重复的，你可以找到一堆建议使用 box-shadow 作为元素的焦点状态而不是 outline 的博客文章，因为它在术语上更灵活样式的样式，它也遵循您正在样式化的元素的 border-radius，这与始终保持矩形的 outline 不同。

将 outline 替换为 box-shadow 是否是一种好的做法？这样做有什么注意事项吗？

Answer 1

Is it considered a good practice to replace outline with box-shadow? Are there any caveats of doing so?

WCAG 有一个特定的失败：

F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

请注意，用户可能希望根据自己的特殊性（更好的对比度、特定颜色、大小……）定制自己的轮廓指示器。因此，通过删除它并用 box-shadow 替换它，您不会让他们自己的设置优先于您的设置。

Answer 2

使用 box-shadow 作为焦点指示器有一个严重的警告。它不适用于 Windows 高对比度主题。

当 Windows 高对比度主题打开时，支持它的 Web 浏览器将覆盖某些 CSS 属性。 Firefox、IE 和 Edge 可以做到这一点，但基于 Chromium 的浏览器还没有做到这一点。

前景色被覆盖，以匹配 Windows 主题。这适用于文本、边框和轮廓。
- 注意CSStransparent关键字是颜色值，这里也被覆盖了。透明边框变得可见。
背景颜色被覆盖，以匹配 Windows 主题。
在 IE 和 Firefox 中删除了背景图像（包括 CSS 渐变）。
- Edge 保留背景图像，但对文本应用纯色背景。所以部分背景图片可能看不到。
box-shadow 未应用，因此不能用作焦点指示器。

当 Windows 高对比度主题生效时，将不会看到以下焦点样式：

a:focus {
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);
  outline: none;
}

但是有一种方法可行。与其完全删除轮廓，不如使其透明，同时保留轮廓样式和宽度。当Windows 高对比度主题生效时，不会出现框阴影，但会出现轮廓，因为透明颜色被覆盖了。

a:focus {

  /* Visible in the full-colour space */
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);

  /* Visible in Windows high-contrast themes */
  outline-color: transparent;
  outline-width: 2px;
  outline-style: dotted;
}

CSS 框阴影与轮廓

CSS box-shadow vs outline

css

accessibility

outline

box-shadow