ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。