Comment résoudre le problème d'image non rognée avec le rayon de bordure dans les navigateurs WebKit ?

Problème de rayon de bordure WebKit avec le découpage d'image

Lors de l'application d'une bordure arrondie à un élément avec une image d'arrière-plan dans les navigateurs basés sur WebKit comme Chrome, les utilisateurs peuvent rencontrer un problème où l'image apparaît non rognée, malgré la présence de la propriété border-radius. Ce problème est particulièrement visible avec le navigateur Chrome.

Pour résoudre ce problème, une solution de contournement a été développée :

• Ajoutez la règle CSS suivante à l'élément qui contient le images :

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

Cette solution de contournement n'affectera pas l'affichage visuel de l'élément, contrairement à la solution de contournement opacity:0.99, qui peut également être efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!