css - 如何在不使用百分比的情况下计算边界半径的最大值？

Question

CSS3 使用该border-radius属性在元素中设置圆角。这些值通常在px中设置，允许的最小值是0px。根据具有此属性的元素的尺寸，视觉结果是可变的。例如，尺寸为100px X 100px的元素border-radius: 20px;不会完全圆润（圆形），否则尺寸为 10px X 10px的元素将是。允许的最大值没有限制。

问题是：如何根据元素大小计算最大值，使其 100% 舍入？

小提琴页面

编辑：如何计算以像素（px）为单位的值？

Answer 1

为什么不使用百分比？

border-radius: 50%;

只要确保你应用它的任何东西都是方形的。

Answer 2

正确的方法应该是

border-radius: 50%;

规范声明您可以在此处使用百分比值，并且它应该来自 border-box元素的相应尺寸。

规范中的图像说明了如果您需要一个圆圈，为什么50%是正确的值：

如果您的元素不是方形的（高度！= 宽度），您仍然可以使用它来获得一个漂亮的椭圆。