Que se passe-t-il lorsque les rayons des frontières se chevauchent?

L'intelligence des coins arrondies des bordures CSS est son application flexible. Il peut non seulement définir un rayon d'angle arrondi unifié, mais également définir différentes valeurs pour différents coins. Cependant, lorsque les rayons arrondis se chevauchent, le navigateur effectue un traitement "dans les coulisses", ce qui peut conduire à des résultats inattendus.

De nombreux développeurs connaissent la technique "999em hack" pour créer des rectangles "en forme de pilule". En fixant une énorme valeur de radius frontalière (comme 999em ou 999vmax), les coins du rectangle peuvent être parfaitement arrondis en demi-cercles. L'avantage de cette méthode est qu'il peut réaliser l'effet sans connaître la taille du rectangle.

Cependant, cette technique peut avoir un comportement anormal dans certains cas. Par exemple, lorsque nous essayons de créer un coin arrondi "en forme de pilule" sur le côté droit d'un rectangle et de régler un coin arrondie plus petit à gauche, le coin arrondi à gauche peut disparaître ou devenir extrêmement petit.

En effet, pour empêcher le chevauchement des rayons d'angle arrondi, le navigateur l'ajustera en fonction de la spécification. Les formules complexes dans les spécifications sont conçues pour garantir que tous les rayons arrondis sont réduits à l'échelle, évitant ainsi le chevauchement.

Le navigateur calcule le rapport de la somme de la longueur de chaque côté du rectangle à son rayon d'angle arrondi adjacent. Il multiplie ensuite tous les rayons arrondis par le plus petit de ces rapports. De cette façon, tous les rayons arrondis seront réduits jusqu'à ce qu'il ne se chevauche plus.

Illustrons avec un exemple: si le rectangle est de 200px de largeur, 100px de hauteur, le rayon d'angle arrondi à droite est de 400px en rayon à gauche est de 40 pix en rayon. Le navigateur calcule le rapport:

<code>顶部：200px / (40px 400px) = 0.455右侧：100px / (400px 400px) = 0.125底部：200px / (40px 400px) = 0.455左侧：100px / (40px 40px) = 1.25</code>

Le rapport minimum est de 0,125, donc tous les rayons arrondis seront multipliés par 0,125. Le résultat est que le rayon du coin arrondi à droite devient 50px et le rayon du coin arrondi à gauche devient 5px.

Ce mécanisme d'échelle garantit que les rayons d'angle arrondis ne se chevauchent pas, mais en même temps, il peut également faire disparaître les rayons d'angle arrondis plus petits et semblent même disparaître.

La raison pour laquelle le navigateur choisit de cette façon est qu'il peut maintenir la relation proportionnelle entre le rayon des coins arrondis. Si le navigateur adopte d'autres stratégies, telles que le rétrécissement du rayon arrondi maximal, cela peut rendre le résultat final plus différent des attentes du développeur.

En bref, la compréhension du mécanisme de traitement des coins arrondis qui se chevauchent dans les frontières CSS aident les développeurs à mieux contrôler les effets de coin arrondis et éviter des résultats inattendus. Merci à ma collègue Catherine d'avoir d'abord découvert ce problème, et James m'a aidé à comprendre les spécifications!

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!