Chrome の画像で境界線の半径が機能しないのはなぜですか?

Webkit の画像に CSS 境界線の半径が適用されない

Chrome を使用して #screen 要素に境界線の半径を適用すると問題が発生しますが、他のブラウザーでは適用できません?この問題は、Chrome の画像トリミング処理の欠陥が原因である可能性があります。

#screen 要素は CSS を使用して、border-radius で丸められた背景画像を設定します。

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

ただし、 Chrome では、画像は border-radius プロパティの影響を受けないようです。

回避策

このバグに対処するための回避策が用意されています。

.element-that-holds-pictures {
    perspective: 1px;
}

画像を含む親要素に遠近感を適用すると、Chrome は画質を損なうことなく境界線の半径を正しく適用します。この回避策は、opacity:0.99.

などの他の代替手段とは異なり、表示には影響しません。

以上がChrome の画像で境界線の半径が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。