Comment puis-je résoudre les problèmes de débordement des coins arrondis CSS3 dans les navigateurs Webkit ?

Débordement de masquage des coins arrondis CSS3 : une solution multi-navigateurs

Dans le domaine de la conception Web, les coins arrondis sont devenus un élément de conception essentiel . Cependant, lorsqu'ils sont appliqués aux div parents, ils peuvent exposer le contenu de débordement dans les navigateurs basés sur des kits Web comme Chrome et Opera. Ce problème se pose particulièrement lorsque le div parent est positionné de manière relative ou absolue.

Le dilemme Webkit/Opera

Le code CSS ci-dessous, qui fonctionne parfaitement dans Firefox et IE9, échoue dans les navigateurs basés sur Webkit en raison de ce bug :

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

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

Un multi-navigateur Solution

Heureusement, une solution intelligente a émergé qui résout ce problème sur tous les navigateurs :

1. Ajouter un masque CSS WebKit : Appliquer le -webkit- propriété mask-image au div parent avec une image PNG à un seul pixel. Intégrez l'image dans le CSS lui-même pour éliminer une requête HTTP.

Code mis à jour :

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

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

Cette solution rétablit le comportement souhaité, masquant déborder du contenu dans les coins arrondis, même dans les navigateurs basés sur Webkit. Il corrige efficacement le bug spécifique au navigateur et garantit un style cohérent sur différentes plates-formes.

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!