「border-radius」のパーセンテージとピクセル/Ems: 違いは何ですか?

＆lt; h2＆gt; border-radiusパーセンテージ対ピクセルとems＆lt;/h2＆gt;

ボーダーラジウスプロパティは、要素の丸い角を定義するために使用されます。 。これは、楕円曲線の水平半径と垂直半径を表す 2 つの値を取ります。 border-radius の動作は、パーセンテージまたはピクセル/ems のどちらが単位として使用されるかによって異なります。

パーセンテージ

W3C 仕様に従って、パーセンテージが使用される場合、境界半径に使用される場合、境界ボックスの対応する寸法を参照します。これは次のことを意味します:

• 水平方向の半径は要素の幅の 50% です。
• 垂直方向の半径は要素の高さの 50% です。

これ両方の半径がオブジェクトのサイズに比例する楕円形になります。 element.

ピクセルと Ems

一方、border-radius に単一の非パーセンテージ値 (ピクセルや ems など) を使用すると、常に結果的に円になります。これは、水平軸と垂直軸の両方に同じ半径が適用されるためです。

border-radius: 999px の例では、理論的には円の半径は 999px になるはずです。ただし、曲線の重なりを防ぐために追加のルールが適用され、実質的に半径が要素の最小辺のサイズの半分に減ります。したがって、この場合の半径は 50px になります。

パーセンテージと非パーセンテージの境界線の半径の比較

例のように、固定サイズの要素の場合、パーセンテージとピクセルの両方を使用して同様の結果を得ることができます。あなたの場合、境界半径: 50%; border-radius: 115px/50px と同等です。 (両側の 50%)。

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