web-dev-qa-db-ja.com

パーセンテージ（％）およびピクセル（px）またはemの境界半径

ピクセルまたはem値を境界半径に使用する場合、エッジの半径は値であっても常に円弧またはpill shapeです要素の最大の辺より大きい。

percentagesを使用すると、エッジの半径は楕円になり、要素の各辺の中央から始まり、楕円または楕円の形になります。

pixel (px) border radiuspercent (%) border-radius

Border-radiusのピクセル値：

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }
<div>border-radius:999px;</div>

Border-radiusのパーセント値：

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}
<div>border-radius:50%;</div>

境界線の半径のパーセンテージが、ピクセルまたはem値で設定された境界線半径と同じように機能しないのはなぜですか？

csscss3css-shapes
96
web-tiki

境界半径：

まず、border-radiusプロパティが2つの値を取ることを理解する必要があります。これらの値は、角の形状を定義する4分の1楕円のX/Y軸上の半径です。
値の1つのみが設定されている場合、2番目の値は最初の値と等しくなります。したがって、border-radius: xはborder-radius:x/x;と同等です。

パーセント値

W3C仕様の参照： CSS Backgrounds and Borders Module Level 3 border-radius property これは、パーセンテージ値に関して読み取ることができるものです：

パーセンテージ：境界ボックスの対応する寸法を参照してください。

したがって、border-radius:50%;は楕円のraddiを次のように定義します。

  • X軸の半径は、コンテナの50％width
  • Y軸の半径は、コンテナの50％height

Border-radius in percentage (%) make an Ellipsis

ピクセルおよびその他のユニット

ボーダー半径のパーセンテージ（em、in、ビューポート関連ユニット、cm ...）以外の1つの値を使用すると、常に楕円になります同じX/Y半径。 つまり、円。

border-radius:999px;を設定すると、円の半径は999pxになります。 しかし、別の 曲線が重なり合うときにルールが適用されます 円の半径を最小辺の半分のサイズに縮小します。したがって、例では、要素の高さの半分である50pxになります。

Border-radius in pixels (px) make a pill shape

この例（固定サイズの要素）では、pxとパーセンテージの両方で同じ結果を得ることができます。要素は230px x 100pxであるため、border-radius: 50%;はborder-radius:115px/50px;（両側の50％）と同等です。

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>
148
web-tiki

最初の値を必要な％で除算するだけです。50％の境界半径が必要な場合は、次のように記述します。

border-radius: 25%/50%;

または別の例：

border-radius: 15%/30%;

JsまたはSASSで簡単に計算できます。

4
CyberJ

質問への実際の答えではなく、それに出くわすかもしれない人のためのユーザビリティのアドバイス：

相対単位を使用したいが、%の楕円形の動作を望まない場合は、常にemまたはremを使用できます。例えば。 border-radius: 1em;

1
Raven