Comment masquer le contenu débordant avec des coins arrondis dans Chrome et Opera ?

Masquer le débordement avec des coins arrondis dans Chrome et Opera

Question :

Comment pouvez-vous créer un div parent avec des coins arrondis qui masque avec succès le contenu de ses enfants tout en conservant un comportement de débordement approprié dans Chrome et Opera ?

Incompatibilité du Webkit avec Overflow : Caché

Dans les navigateurs tels que Firefox et IE9, l'application de "overflow : caché" à un div parent aux coins arrondis masque efficacement tout contenu débordant. Cependant, dans les navigateurs basés sur des webkits (Chrome, Safari) et Opera, cette approche échoue lorsque le div parent est positionné de manière relative ou absolue.

Solution : WebKit Mask

Une solution alternative consiste à utiliser un masque Webkit sur le div parent. Cette approche masque la zone en dehors des coins arrondis, masquant efficacement tout contenu débordant.

Implémentation :

Pour implémenter cette solution, ajoutez le CSS suivant au div parent :

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Cette propriété CSS fait référence à une image PNG transparente d'un seul pixel, qui peut être incluse directement dans le CSS pour éviter un HTTP supplémentaire demande.

Exemple :

Considérez le code suivant :

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* original CSS that broke overflow in webkit browsers */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* webkit mask fix */
}

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

<div><p>En incorporant ce correctif, les coins arrondis seront désormais efficacement masquez tout contenu débordant dans Chrome et Opera, permettant un design visuellement propre et réactif.</p></div>

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!