我正在尝试在网站上使用标签导航。当它包围图像时，Chrome中的默认轮廓可能很轻，因此很难看到。
我已经播放了CSS outline属性的可能值，但是它们都没有像默认轮廓那样令人愉悦的"发光"，即使使用outline-width，我似乎无法控制其宽度。
我设法用盒子阴影模仿了"更明显的轮廓"：
*:focus {
outline: none;
box-shadow: 0 0 10px 5px blue;
position: relative;
}
但是，该解决方案有两个问题：
- 元素可能需要特殊定位，以便"大纲"在文档中显示在相邻的以下元素（因此
position: relative），在一般情况下不起作用，因为不可避免地，某些元素将需要是position: absolute，等等。 - "概述"这一明显的违约鼠标用户。
因此，我想知道是否有浏览器设置可以使我更容易看到轮廓，并且（最好）不会干扰页面样式。
这对您今天没有帮助，但是CSS4的:focusring选择器来了（尽管其名称可能会更改）：
:focusring仅在元素当前聚焦时与元素匹配，并且应为该元素绘制焦点环或其他指标。这对于可访问性非常有用。
本质上，它旨在用于键盘使用和焦点以编程方式移至项目的情况（例如，可能具有tabindex=-1）。
更多信息：https：//github.com/w3c/csswg-drafts/pull/709
它基于:-moz-focusring。
据我所知，还没有pollyfill。
与此同时，浏览器有开放的问题（对不起，现在找不到它们），以使默认的焦点样式更加可见。
，但这也没有帮助您。
我知道有些人使用屏幕读取器，并打开了焦点指示器，以查看页面上的位置。这可能对您作为用户而不是作者有用。NVDA（免费）允许使用插件。
-
Chrome使用"自动"轮廓样式（
outline: auto 2px -webkit-focus-ring-color;）
可悲的是，这也覆盖了默认的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}