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 */ 
}