Maison > Article > interface Web > Pourquoi le contenu s'étend-il au-delà des coins arrondis ?

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

Susan Sarandonoriginal: 2024-11-10 13:11:02838parcourir

Why Does Content Extend Beyond Rounded Corners?

Les bordures arrondies affectent-elles la visibilité du contenu ?

Question :

Pourquoi le contenu de un élément avec des bordures arrondies (border-radius) s'étend au-delà de la limite du conteneur ?

Exemples HTML et CSS :

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

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

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

Explication :

Par défaut, le contenu d'un fichier

L'élément n'est pas tronqué lorsqu'un débordement visible est appliqué. La spécification CSS indique clairement :

"Le débordement par défaut pour les éléments

(et la plupart des autres éléments) est visible, et la spécification dit ceci à propos du débordement : visible :

... le contenu n'est pas tronqué, c'est-à-dire qu'il peut être rendu en dehors de la zone de bloc. 🎜>Conséquences :

Par conséquent, les éléments de contenu peuvent s'étendre au-delà des coins arrondis de leur conteneur si un débordement visible est utilisé.

Résolution :

Pour garantir que le contenu est tronqué dans les coins arrondis du conteneur, un débordement autre que visible (par exemple, masqué, défilement, etc.) doit être appliqué au conteneur. Dans ce cas, l'ajout de overflow: Hidden à la classe .progressbar résoudra le problème.

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!

css html if for class default this overflow border background issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un trou transparent dans une superposition CSS ?Article suivant：Comment créer un trou transparent dans une superposition CSS ?

Articles Liés

Voir plus