css - パーセンテージを使用せずに境界半径の最大値を計算する方法は?

Question

CSS3 はこのborder-radius属性を使用して、要素の角を丸く設定します。通常、値はpxで設定され、許容される最小値は0pxです。この属性を持つ要素の寸法に応じて、視覚的な結果は変化します。たとえば、寸法が 100px X 100px の要素は、完全に丸めborder-radius: 20px;られません (円) 。許容される最大値に制限はありません。

問題は、要素のサイズに応じて最大値を計算して 100% 丸めるにはどうすればよいかということです。

フィドルページ

編集: ピクセル (px) で値を計算する方法は?

Answer 1

なぜパーセントを使わないのですか？

border-radius: 50%;

それを適用するものは何でも正方形であることを確認してください。

Answer 2

正しい方法は

border-radius: 50%;

仕様では、ここでパーセンテージ値を使用できると述べており border-box、要素の対応する寸法から導出する必要があります。

仕様の画像50%は、円が必要な場合に正しい値である理由を示しています。

要素が正方形 (高さ != 幅) でない場合でも、それを使用して素敵な楕円を得ることができます。