Le contenu du clip Border-Radius ?

Border-Radius et coupure de contenu : comprendre le comportement attendu

Lors de l'application d'un border-radius à un conteneur, le contenu qu'il contient peut s'étendre de manière inattendue au-delà de ses bords. Ce constat soulève la question : le contenu doit-il être découpé à l'intérieur des bordures arrondies ?

Pour comprendre le comportement attendu, nous approfondissons les spécifications du CSS. La propriété de débordement par défaut pour les éléments, y compris les divs, est définie sur « visible », indiquant que le contenu ne sera pas tronqué et peut s'étendre en dehors de la zone de bloc.

De plus, le module Arrière-plans et bordures spécifie 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 pour que les coins arrondis coupent le contenu, la valeur de débordement du conteneur doit être définie sur autre chose que "visible".

Par conséquent, aussi surprenant que cela puisse paraître, il est attendu un comportement que le contenu n'est pas découpé dans des bordures arrondies, sauf si le conteneur a une valeur de débordement « cachée » ou d'autres valeurs non visibles. Ce comportement garantit que le contenu n'est pas tronqué lorsque le conteneur présente un débordement visible.

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!