CSS邊框半徑背景顏色流血

Question

當我有一個元素在內部時，我遇到了圍繞半徑邊界的奇怪流血/僞影的問題。

我已經通過很多關於類似問題的帖子進行了搜索，並且我見過的似乎適用於其他人的唯一建議不適用於我。建議像：

div { 
    background-clip: padding-box; 
    overflow: hidden; 
} 

我已經創建了一個JSFiddle來複制問題。看看左上角和右上角，你可以看到一些父母的黑色背景。 https://jsfiddle.net/2596n440/

我該如何解決這個問題？

Answer 1

對於Chrome，此問題報告爲here。

我懷疑原因在各瀏覽器中是一樣的：元素被單獨裁剪，並且反鋸齒允許出血。

該修復方案將根據具體情況進行修改，目標是移除共享邊界。舉例來說，重新排列這些元素使它們成爲頂部和底部，而不是父母和孩子。如果這不是一個選項，你可能可以去調整CSS一點：

.outer { 
    border-radius: 8px; 
    height: 456px; 
    left: 50%; 
    margin-left: -200px; 
    margin-top: -228px; 
    top: 50%; 
    width: 400px; 
    background-color: black; 
    /*overflow:hidden;*/ /* removed */ 
    z-index: 150; 
    position: fixed; 
} 
.inner { 
    border-radius:8px 8px 0 0; /* added */ 
    width: 400px; 
    height: 300px; 
    background-color: white; 
    position: relative; 
    top:-1px; /* added */ 
}