Pourquoi le contenu s'étend-il au-delà des coins arrondis dans la conception Web ?

Coins arrondis et coupure de contenu : attendus ou inattendus ?

Dans la conception Web, l'utilisation de coins arrondis (rayon de bordure) est souvent souhaitait créer des mises en page visuellement attrayantes. Cependant, un problème déroutant surgit lorsque le contenu semble s'étendre au-delà des bords arrondis de son conteneur.

Exemple :

Considérez le HTML et le CSS suivants :

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

<div class="progressbar">
    <div class="buffer"></div>
</div>

Dans cet exemple, le div avec la classe "progressbar" a des coins arrondis, mais le div qu'il contient ("buffer") semble se libérer de ces contraintes et s'étendre au-delà des bords incurvés.

La vérité révélée :

Étonnamment, ce comportement est voulu par les navigateurs Web. Selon la spécification CSS, la valeur de débordement par défaut pour les éléments (y compris les divs) est « visible », ce qui permet au contenu de s'étendre au-delà des frontières de l'élément.

La propriété « border-radius », cependant, n'affecte que le l'arrière-plan de l'élément et ne coupe pas son contenu. Pour découper le contenu sur les bordures incurvées, la valeur de débordement doit être définie sur une valeur autre que « visible », telle que « caché » ou « défilement ».

Solution Nirvana :

Pour résoudre ce problème, définissez simplement la propriété de débordement du conteneur (« barre de progression ») sur « caché », comme le montre cette modification extrait :

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }

Ce faisant, le contenu du conteneur sera correctement clipsé sur les bords incurvés, vous donnant l'effet visuel souhaité.

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!