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

Border-radius: Pixel or Percentage?

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

Border-radius プロパティ

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

パーセント値

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

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

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

< ;li>Y 軸半径: 50%コンテナの高さ



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


ピクセルと他の単位




パーセンテージ以外の単位(ピクセル、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 サイトの他の関連記事を参照してください。

css define if for using class Property this border viewport background ul li Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。