箱陰影和邊界渲染錯誤

的CSS導致「錯誤」：箱陰影和邊界渲染錯誤

div { 
    width: 100px; 
    height: 100px; 
    background-color: transparent; 
    box-shadow: 0 0 15px 20px #000 inset; 
    border: 100px solid #000 ; 
    border-radius: 150px; 
}

它看起來像有某種插圖箱陰影和外圍邊框之間1px的透明邊框的。

看一看this live example，我可以重現渲染古怪的Chrome，Firefox和IE的最後版本。（因此不渲染引擎依賴性）

並且它不具有較低邊界半徑發生（換言之，當形狀不是圓形它不會發生）

編輯：

我沒有找到辦法讓這個東西消失，但使用低透明度使它幾乎看不見。我將使用該技術（並且將問題保持打開狀態），直到出現真實解決方案。

來源

2012-01-20 Pioul

絕對看起來像箱子陰影中的錯誤（當使用傳播參數時）。作爲解決方法，只需使用覆蓋div。下面的代碼：

HTML：

<div></div> 
<div class="overlay"></div>

CSS：

div { 
    margin:10px; 
    width: 100px; 
    height: 100px; 
    background-color: transparent; 
    box-shadow: 0 0 15px 20px #000 inset; 
    border: 100px solid #000 ; 
    border-radius: 150px; 
} 
div.overlay { 
    margin-top:-310px; 
}

這裏的小提琴：http://jsfiddle.net/eX3cy/1/

編輯：

下面是用模糊的小提琴和傳播調整以及（至表明相同的結果，減去多餘的部分，就可以實現）：http://jsfiddle.net/wgpzL/

來源

2012-01-20 23:44:01 vdbuilder

是啊，這不正是我周圍叫工作，即使錯誤是不可見。如果可以提供幫助，這與擴散無關，通過使用四個陰影（每個陰影一個）可以實現同樣的效果：'box-shadow：15px 0 15px＃000 inset，-15px 0 15px＃000 inset，0 15px 15px＃000 inset，0 -15px 15px＃000 inset'（並且bug仍然在這裏，沒有使用任何傳播） – Pioul

@Pioul只是想說，在你給的例子中，將傳播設置爲0使得行消失。錯誤的原因是瀏覽器開發人員需要進行診斷/修復。我們所能做的就是與我們所擁有的一起工作。在這種情況下，上面的代碼與您的代碼產生的結果相同，沒有不需要的線/圓。除非/直到瀏覽器被更新以改變行爲，否則這是一樣好。 – vdbuilder

哦，是的，同意傳播的東西。但是，你提供的coode不會產生無缺陷的效果，它只是使它不那麼明顯（但它仍然在這裏，仍然令我感到不安 - 我知道，我討厭：D）。使其不易見的另一種方法是使用更淺的顏色（如#eee，如果背景爲#fff）。但是，錯誤仍然在這裏：/ – Pioul

箱陰影和邊界渲染錯誤

回答

相關問題