Pourquoi Border Radius ne fonctionne-t-il pas sur les images dans Chrome ?

Le rayon de bordure CSS n'est pas appliqué aux images dans Webkit

Je ne parviens pas à appliquer le rayon de bordure à l'élément #screen à l'aide de Chrome mais pas d'autres navigateurs ? Ce problème est probablement dû à une faille dans la gestion du découpage d'image par Chrome.

L'élément #screen utilise CSS pour définir une image d'arrière-plan arrondie avec border-radius :

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

Cependant, dans Chrome, l'image ne semble pas être affectée par la propriété border-radius.

Solution de contournement

Pour résoudre ce bug, une solution de contournement est disponible :

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

L'application d'une perspective à l'élément parent contenant les images oblige Chrome à appliquer correctement le rayon de bordure sans déformer la qualité de l'image. Cette solution de contournement n'affecte pas l'affichage, contrairement à d'autres alternatives telles que opacity:0.99.

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!