Question

我注意到，当我在CSS中设置outline-style: auto时，无论outline-width，大纲总是2px宽，除非outline-width为0，否则没有大纲。

在这种情况下，为什么浏览器会忽略outline-width？如何更改宽度？（我知道我可以使用outline-style: solid，但它不会产生相同的效果。）

div {
  background-color: #CCC;
  width: 50px;
  height: 50px;
  margin: 10px;
  outline-color: dodgerblue;
  outline-style: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<div style="outline-width: 0px">0px</div>
<div style="outline-width: 1px">1px</div>
<div style="outline-width: 10px">10px</div>
<div style="outline-width: 1em">1em</div>

Answer 1

如果您使用例如outline-style: solid;，则可以使用

当样式auto被报告为bug in Chrome时，不确认设置的宽度，Edge / IE11除非设置样式（auto除外）并且Firefox呈现，否则不会呈现它auto为solid

W3C说：（https://www.w3.org/TR/css-ui-3/#outline-style）

auto值允许用户代理呈现自定义大纲样式，通常是用户界面默认的样式平台，或者可能是比可描述的更丰富的风格在CSS中详细说明，例如圆形边缘轮廓，半透明外部像素看起来发光。因此，该规范确实如此没有定义如何合并或使用outline-color（如果有的话）渲染自动样式轮廓时。用户代理可以将auto视为 solid。

＆＃13;

div {
  background-color: #CCC;
  width: 50px;
  height: 50px;
  margin: 10px;
  outline-color: red;
  outline-style: solid;
}

＆＃13;

<div style="outline-width: 0px">0px</div>
<div style="outline-width: 1px">1px</div>
<div style="outline-width: 10px">10px</div>
<div style="outline-width: 1em">1em</div>

＆＃13;

Answer 2

当outline-style为auto时，浏览器会绘制自定义的特定于平台的大纲。如果他们的自定义大纲实现不支持，则可能导致他们忽略任何或所有其他大纲属性。这意味着您可能无法自定义轮廓的宽度。

有趣的是，spec仅提到浏览器可以自由忽略outline-color，即使迫使它们遵守outline-width的任意非零值也没有意义在绘制特定于平台的轮廓时，首先可能甚至不支持任意宽度（最常见的情况是您使用的任何浏览器进行测试）。

请注意，Firefox会将outline-style: auto视为outline-style: solid（规范中也会提到），这意味着将使用您指定的宽度呈现轮廓。 IE和Microsoft Edge似乎根本不支持outline-style: auto，这使得所有这些与这些浏览器无关（我至少期望Microsoft Edge将其视为可靠的，因为那是怎样的？默认情况下，Windows 10默认绘制焦点样式，但我离题了。

为什么忽略outline-width？

2 个答案: