Pourquoi les coins arrondis avec « overflow : caché » échouent-ils dans WebKit et Opera, et comment puis-je y remédier ?

Résoudre les problèmes cachés de débordement avec les coins arrondis CSS3 dans WebKit et Opera

Le masquage du contenu sous les coins arrondis implique souvent l'utilisation de la propriété overflow: Hidden. Cependant, cette technique peut mal fonctionner dans les navigateurs basés sur WebKit (y compris Chrome) et Opera lorsque l'élément parent est positionné de manière relative ou absolue.

Problème :

Pour illustrer le problème, considérez le code suivant :

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

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

Dans ce cas, le div #wrapper est positionné de manière absolue et a des coins arrondis. Cependant, le contenu de la #box div déborde des coins arrondis dans les navigateurs basés sur WebKit et Opera.

Solution : masque CSS WebKit

Une solution alternative pour résoudre ce problème consiste à utiliser un masque CSS WebKit sur l'élément #wrapper. Cela implique d'utiliser une image PNG d'un seul pixel comme masque :

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

Cette technique masque avec succès le débordement dans les navigateurs basés sur WebKit et Opera, permettant aux coins arrondis de masquer efficacement le contenu de l'élément enfant.

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!