为什么轮廓宽度被忽略？

我注意到，当我在我的CSS中设置outline-style: auto时，轮廓总是2px宽，无论outline-width，除非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>

来源

2016-11-07 Lynn

您使用哪个浏览器？我会重置宽度 –

您使用的是哪种浏览器？你是否在多个浏览器上测试过它？这个问题在你测试过的所有浏览器中看起来是否一样？我从你提供的例子中看到了这一点：http://i.imgur.com/mSLG31r.png – seemly

不是一个答案，但这可能会对我想你想要做的事有所帮助：http://stackoverflow.com/questions/17324960/copy-chrome-default-inputs-outline-style – DBS

如果使用例如outline-style: solid;它会工作

不承认宽度设定时的风格auto报告为bug in Chrome，边缘/ IE11不使它除非设置了样式，除了auto和Firefox渲染auto作为solid

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

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

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

<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>

来源

2016-11-07 17:32:36 LGSon

你错过了它所说的部分“（我知道我可以使用大纲样式：纯色，但它只是没有给出相同的效果）” – BoltClock

@ BoltClock因此，在我的答案中，不是我的第2段：斜体，回答那个？ – LGSon

@BoltClock添加了一个ref。来自W3C – LGSon

当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默认情况下绘制焦点样式的方式，但我离题了）。

来源

2016-11-07 18:18:14 BoltClock

为什么轮廓宽度被忽略？

回答

相关问题