境界半径が重複するとどうなりますか？

CSS境界の丸い角の賢さは、その柔軟な用途です。統一された丸い角の半径を設定するだけでなく、異なる角に異なる値を設定することもできます。ただし、丸みを帯びた半径が重複すると、ブラウザは「舞台裏」処理を行い、予期しない結果につながる可能性があります。

多くの開発者は、「999emハック」テクニックに精通しており、「丸い形をした」長方形を作成しています。巨大なボーダーラジウス値（999EMや999VMAXなど）を設定することにより、長方形の角を半円に完全に丸くすることができます。この方法の利点は、長方形のサイズを知らずに効果を達成できることです。

ただし、この手法には異常な挙動がある場合があります。たとえば、長方形の右側に「錠剤の形をした」丸い角を作成し、左側に小さな丸い角を設定しようとすると、左側の丸い角が消えたり、非常に小さくなります。

これは、丸い角の半径の重複を防ぐために、ブラウザが仕様に従って調整するためです。仕様の複雑な式は、すべての丸い半径がスケールまでスケーリングされ、オーバーラップを回避するように設計されています。

ブラウザは、長方形の両側の長さの合計と隣接する丸い角の半径の比率を計算します。次に、すべての丸い半径にこれらの比率の最小値を掛けます。このようにして、すべての丸い半径は、もはや重複しなくなるまで縮小されます。

例を示しましょう。長方形の幅が200px、高さが100pxの場合、右側の丸い角の半径は半径40pxです。ブラウザは比率を計算します。

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

最小比は0.125であるため、すべての丸い半径に0.125を掛けます。その結果、右側の丸い角の半径が50pxになり、左側の丸い角の半径が5pxになります。

このスケールダウンメカニズムにより、丸い角の半径が重複しないことが保証されますが、同時に、より小さな丸い角の半径が過剰に遮られ、消滅するように見えることさえあります。

ブラウザがこのように選択する理由は、丸い角の半径間の比例関係を維持できるからです。ブラウザが最大丸い半径を狭くするなど、他の戦略を採用している場合、最終結果が開発者の期待とは異なる可能性があります。

要するに、CSS境界で丸い角を重複させる処理メカニズムを理解することで、開発者は丸い角の効果をよりよく制御し、予期しない結果を回避できます。この問題を最初に発見してくれた同僚のキャサリンに感謝し、ジェームズは私が仕様を理解するのを助けてくれました！

以上が境界半径が重複するとどうなりますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。