「border-radius」がパーセンテージとピクセル/ems で異なる形状を生成するのはなぜですか?

ピクセル (%) およびピクセル (px) または Em

境界半径がなぜパーセンテージとピクセル?

Border-radius を使用すると、Web 要素の角を丸くすることができます。ただし、パーセントまたはピクセルを使用すると、角の形状が変わります。

パーセント値

CSS 背景と境界線モジュール レベル 3 によると、パーセントは以下を参照します。境界ボックスの対応する寸法。たとえば、border-radius: 50%; と設定すると、X 軸の半径はコンテナの幅の 50% になり、Y 軸の半径はコンテナの高さの 50% になります。これにより、楕円形になります。

ピクセルとその他の単位値

境界線に単一のピクセル値または他の単位 (例: em、in) を使用します。 radius は常に楕円、つまり円を生成します。

ただし、曲線が重なる場合、半径を最小辺のサイズの半分に減らすルールが適用されます。たとえば、border-radius: 999px; と設定すると、 230 ピクセル x 100 ピクセルの要素では、半径は要素の高さの半分である 50 ピクセルに減ります。

例

次のことを考えてください。コード スニペット:

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
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;
  text-align: center;
}

境界半径あり: 50%;、角は楕円形になります。 border-radius: 115px/50px; の場合、115px/50px は 230px x 100px の要素の両側の 50% に相当するため、角は同じ楕円形になります。

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