overflow - 境界半径のある黒いボックスに表示される白い角

Question

奇妙な効果が得られます（現在はクロムです）。独自のオーバーレイ ダイアログ ボックスを作成しました。私のウェブサイトの上に半透明の背景があり、その上にボックスがあります。ご覧のとおり、バーの上部には黒い背景があります。箱のメイン部分はホワイト思考。

見るのは簡単ではありませんが、私を悩ませています。

後ろから白が透けて見えます。（赤に変更すると色が変わることがわかります）スクリーンショットの右上隅、「X」のすぐ上に表示されます

ヘッダーとボックスの境界線の半径は 3px です

.blockUI .overlay {
    background: #f00;
    border-radius: 3px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    position: relative;
        top: 20%;
    text-align: inherit;
    width: 600px;
    z-index: 10009;
}

blockUI .overlay h1 {
    background: #000;
    border-bottom: 2px solid #F48421;
    border-radius: 3px 3px 0 0;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin: -10px;
    padding: 10px;
}

Answer 1

overflow: hidden;withborder-radiusは一部のエンジンでレンダリングの不一致を引き起こすように思われるため(これを見てください)、親要素と子要素の両方で border-radius を使用して角を丸くする必要があります。

お気づきのように、余分なピクセルが「光る」という奇妙な結果が得られます。これを補うために、子の境界半径を減らすだけです (またはその逆)。

blockUI .overlay h1 {
    border-radius: 2px 2px 0 0;
}

Answer 2

親 div を試す必要があります。

-webkit-background-clip: padding-box;