css - 当轮廓样式为自动时，轮廓偏移不会应用于 Chrome/Windows

Question

我正在将样式应用于位于以下行的焦点元素:

.<class-name>:focus {
  outline: 4px auto #068065 !important;
  outline-offset: 2px !important;
}

(这是 Chrome 扩展代码的一部分，因此不需要跨浏览器)。

问题是当轮廓样式为“自动”时，轮廓偏移不会在 Chrome/Windows 上应用。在 Chrome/Mac 上，这工作正常。

如果我将轮廓样式从“auto”更改为“solid”，轮廓偏移就可以正常工作。

我希望能够同时使用“自动”样式和轮廓偏移。有什么想法或建议吗？

Answer 1

我找到了如何在 Chrome 中的 DIV 或其他元素上调整 outline-offset。

默认的 outline-style: auto 意味着浏览器可以选择样式，而 outline-offset 在 Chrome 中不适用于该样式。我们可以将 outline-offset 与 outline-style: solid 一起使用。

div {
    outline-color: #068065;
    outline-style: solid;
    outline-offset: 4px;
    outline-width: 4px;
    
    border: 1px solid red;  /* for comparison */
}

<h1>Testing</h1>

<div>
Hello, world
</div>