「border-radius」がピクセルとパーセンテージで異なる動作をするのはなぜですか?

Border-Radius Discrepancy

border-radius プロパティの動作は、ピクセル値が使用されるかパーセンテージ値が使用されるかによって異なります。

ピクセルとEM値

ピクセルまたはEM値を使用する場合、境界線の半径は円弧または錠剤の形状を作成します。これは、値が 1 つだけ指定されているため、水平半径と垂直半径が等しいためです。指定した値が要素のサイズを超える場合、半径は最小辺の半分のサイズに縮小されます。

パーセント値

一方、次の場合はパーセンテージ値が使用されると、境界線の半径によって楕円形または楕円形が作成されます。これは、パーセンテージが境界ボックスの対応する寸法を参照しているためです。たとえば、border-radius: 50% は、水平半径を要素の幅の 50% に設定し、垂直半径を要素の高さの 50% に設定します。

パーセント値で円形を実現するには、2 つの値が必要です。水平半径と垂直半径を表す値を指定できます。たとえば、border-radius: 50%/25% は、要素の幅の 50% の水平半径と要素の高さの 25% の垂直半径を持つ円を作成します。

この違いは W3C に起因します。仕様では、border-radius のパーセンテージ値が境界ボックスの対応する寸法を参照すると記載されています。

以上が「border-radius」がピクセルとパーセンテージで異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。