CSS `border-radius` のピクセルとパーセンテージ: それらはどのように異なりますか?-CSSチュートリアル-php.cn

CSS `border-radius` のピクセルとパーセンテージ: それらはどのように異なりますか?

DDD

リリース： 2024-12-27 22:37:12

オリジナル

195 人が閲覧しました

Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?

Border-radius: Pixel or Percentage?

CSS を使用して要素の境界半径を定義する場合、次のことに気づくかもしれません。結果の形状は、ピクセル値を使用するかパーセンテージ値を使用するかによって異なります。この記事では、この問題が発生する理由を詳しく掘り下げ、デザインへの影響を探っていきます。

Border-radius プロパティ

The border- radius プロパティは、要素の角の曲線を指定します。角の形状を定義する四分の一楕円の X 軸と Y 軸の半径を表す 2 つの値を受け入れます。

パーセント値

によるとW3C 仕様では、border-radius のパーセンテージ値は要素の幅と高さを指します。境界ボックス。

たとえば、border-radius: 50%;半径を次のように定義します:

X 軸半径:コンテナの幅の 50%

Y 軸半径:

これにより、両方の軸の半径が等しい楕円形になります。

ピクセルと他の単位

パーセンテージ以外の単位(ピクセル、em、ビューポート単位など)を使用すると、等しい半径の楕円が生成され、実質的に円が作成されます。

ただし、結果の円が要素の境界線に重なる場合は、別のルールが適用されます。半径は、要素の最小辺のサイズの半分に縮小されます。これにより、曲線が要素の境界を超えないようになります。

この例では:

 背景: ティール;<br> 境界半径: 999px;<br> 幅: 230px;<br> 高さ: 100px;<br> ...<br>}

<p></div><p><p>境界線の半径: 999px;円を生成します。ただし、円が要素の高さと重なるため、半径は高さの半分の 50 ピクセルに調整されます。</p><br><p>この要素では、ピクセルとパーセンテージの両方を使用して同じ結果を得ることができます。幅と高さの両方の 50% は次のようになります。 115px/50px:</p></p><p><div><div class="snippet-code"><br></p><pre class="brush:php;toolbar:false"> 境界半径: 50%;<br>}<br>.pixels {<br> 境界半径: 115px/50px;<br>}<br>/<em> ... </em>/

<div class="pixels">border-radius: 115px/50px;</div>

ログイン後にコピー

以上がCSS `border-radius` のピクセルとパーセンテージ: それらはどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。