Chrome の画像に対して Border-Radius が機能しないのはなぜですか?

WebKit でボーダー半径が画像を表示しない

すべての接頭辞と標準構文を使用して #screen 要素にボーダー半径スタイルを適用しているにもかかわらず、この要素は Google Chrome では変更されませんが、Firefox および Internet Explorer 9 では期待どおりに表示されます。この問題は、Chrome による画像の境界線のトリミング処理のバグが原因で発生します。

Chrome のバグを解決するための回避策:

この問題を解決するには、次の回避策を実装してください:

<code class="css">.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}</code>

この手法は要素のパースペクティブを変更し、レンダリング エンジンが正しく動作するように強制します。不透明度を 0.99 に設定するなどの他の回避策とは異なり、要素の表示には影響しません。

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