Border-Radius coupe-t-il le contenu ou simplement l'arrière-plan ?

Border-Radius Clipping : Comprendre le comportement

Question :

Le contenu d'un élément avec border-radius s'étendre au-delà de ses frontières ?

Fourni Exemple :

Considérons le code HTML et CSS suivant :

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

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

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

Dans cet exemple, l'élément ".buffer" semble s'étendre au-delà des coins arrondis du Conteneur ".progressbar".

Réponse :

Oui, ce comportement est prévu par la conception.

Explication :

Selon la spécification CSS, la propriété de débordement par défaut pour les éléments est "visible". Cela signifie que le contenu n'est pas tronqué et peut s'afficher en dehors du conteneur. La propriété "border-radius" coupe l'arrière-plan du conteneur, mais si la propriété overflow est définie sur "visible", le contenu ne sera pas affecté.

La spécification CSS pour le découpage de l'arrière-plan indique que "d'autres effets qui se clipse sur la bordure ou sur le bord de remplissage (tel que « débordement » autre que « visible ») doit également se clipser sur la courbe. » Cela signifie que si le débordement est défini sur autre chose que « visible », le contenu sera tronqué dans les coins arrondis du conteneur.

Par conséquent, pour garantir que le contenu reste dans les coins arrondis, il est nécessaire pour définir la propriété de débordement du conteneur sur « caché », « défilement » ou une autre valeur non « visible ». En définissant le débordement sur "caché" dans cet exemple, l'élément ".buffer" sera découpé dans les coins arrondis du conteneur ".progressbar".

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!