爲什麼輪廓寬度被忽略？

我注意到，當我在我的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

爲什麼輪廓寬度被忽略？

回答

相關問題