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

Question

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

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

Fiddle page

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

Answer 1

正确的方法应该是

border-radius: 50%;

spec表示您可以在此处使用百分比值，并且应该从元素的border-box的相应维度派生。

image from the spec说明了如果您需要一个圆圈，50%为正确值的原因：

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

Answer 2

为什么不使用百分比？

border-radius: 50%;

只要确保你申请的是正方形。