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-colour: transparent;
  outline-width: 2px;
  outline-style: dotted;
}

Answer 2

用盒子阴影代替轮廓线是否被认为是一种好习惯？这样做有什么警告吗？

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

请注意，用户可能希望针对自己的特殊性（更好的对比度，特定的颜色，大小等）自定义自己的轮廓指示器。因此，通过删除它并将其替换为isAdded()，您不会让他们自己的设置优先于您的设置。

CSS盒子阴影与轮廓

2 个答案: