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

Answer 2

用盒子阴影替换轮廓是否被认为是一个好习惯？这样做有什么注意事项吗？

WCAG 有一个具体的失败原因：

F78：成功标准 2.4.7 失败，因为元素轮廓和边框的样式删除了视觉焦点指示器或使其不可见

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

其他样式可能会使焦点指示器即使存在也难以看到，例如看起来与焦点轮廓相同的轮廓，或者与焦点指示器颜色相同的粗边框，因此在它们的衬托下看不到焦点指示器。