Question

我正在尝试在网站上使用标签导航。当它围绕图像时，Chrome中的默认轮廓可能非常轻，因此很难看到。

我已经使用了CSS outline属性的可能值，但没有一个有令人愉快的发光＆＃34;就像默认大纲一样，我似乎无法控制其宽度，即使使用outline-width。

我设法模仿了一个更明显的轮廓＆＃34;带有框阴影：

*:focus {
  outline: none;
  box-shadow: 0 0 10px 5px blue;
  position: relative;
}

但是，这个解决方案有两个问题：

元素可能需要特殊定位，以便＆＃34;大纲＆＃34;将出现在文档中相邻的后续元素之上（因此 position: relative），因为在一般情况下不会工作不可避免地，某些元素需要position: absolute，等
＆＃34;大纲＆＃34;这显然是一个令人反感的违约鼠标用户。

因此，我想知道是否有浏览器设置可以让我更容易看到大纲，并且（最好）不会干扰网页的样式。< / p>

Answer 1

今天这对你没有帮助，但是CSS4有一个:focusring选择器（尽管它的名字可能会改变）：

:focusring仅在元素当前聚焦时才匹配元素，并且应该为该元素绘制聚焦环或其他指示符。这对于辅助功能非常有用。

基本上它适用于键盘使用以及以编程方式将焦点移动到某个项目的情况（例如，可能有tabindex=-1的内容）。

据我所知，目前还没有pollyfill。

与此同时，浏览器存在未解决的问题（抱歉，目前无法找到它们），以使默认焦点样式更加明显。

但是今天也没有帮助你。

我知道有些人使用屏幕阅读器，打开焦点指示器，看看他们在页面上的位置。这可能对您作为用户有用，而不是作者。例如，NVDA（免费）允许使用插件。

Answer 2

遗憾的是，这也会覆盖默认的outline-offset值

您只能覆盖outline和outline-offset值来覆盖此值：

outline: solid 2px rgba(77, 144, 254, 0.4);
outline-offset: 2px;

例如，在图像周围添加2px空白区域：

a img {padding:2px}

使用该解决方案，您不会覆盖默认的浏览器焦点指示器

例如：

a.img:focus {outline:dotted rgba(150,200,250,0.8) 2px}
<a href="..." class="img"><img ...

a.img:focus {outline:dashed rgba(150,200,250,0.5) 2px}