WebKit ブラウザーの境界線半径に関するトリミングされていない画像の問題を解決する方法は?

画像トリミングによる WebKit の境界線の半径の問題

Chrome などの WebKit ベースのブラウザーで背景画像を持つ要素に丸い境界線を適用する場合、ユーザーは、border-radius プロパティが存在するにもかかわらず、画像がトリミングされていないように見えるという問題に遭遇する可能性があります。この問題は、Chrome ブラウザで特に顕著です。

この問題に対処するために、回避策が開発されました。

• 次の CSS ルールを、画像:

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

この回避策は、効果的である可能性がある opacity:0.99 の回避策とは異なり、要素の視覚的な表示には影響しません。

以上がWebKit ブラウザーの境界線半径に関するトリミングされていない画像の問題を解決する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。