CSS 框阴影与轮廓

Question

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

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

Answer 1

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

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

• 前景色被覆盖，以匹配 Windows 主题。这适用于文本、边框和轮廓。
  • 请注意，CSS transparent 关键字是一个颜色值，在这里也被覆盖了。透明边框变得可见。
• 背景颜色被覆盖，以匹配 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;
}