Pourquoi CSS3 `border-radius` déborde-t-il dans Chrome/Opera et comment peut-il être corrigé ?

Comment résoudre le problème de débordement avec les coins arrondis CSS3 dans Chrome/Opera

Dans certaines situations, utiliser la propriété border-radius de CSS3 pour créer des arrondis les coins d'un div parent peuvent entraîner un débordement de contenu dans les navigateurs Chrome et Opera. Ce problème survient lorsque le parent est positionné de manière relative ou absolue.

Approche originale

Le code suivant illustre le problème dans Chrome/Opera :

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

Cette approche, qui fonctionne dans Firefox et IE9, ne parvient pas à masquer le contenu débordant dans Chrome/Opera.

Solution améliorée

Une solution consiste à ajouter un masque CSS WebKit à l'élément #wrapper :

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  /* This fixes the overflow:hidden in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Cette approche utilise une image PNG d'un seul pixel pour définir un masque CSS qui masque le contenu débordant. Il résout efficacement le problème de débordement dans Chrome/Opera, en conservant les coins arrondis.

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!