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

Question

CSS3使用该border-radius属性在元素中设置圆角.通常,这些值以px设置,允许的最低值为0px.根据具有此属性的元素的维度,可视结果是可变的.例如,对于尺寸的元件100像素100像素X与border-radius: 20px;,不会得到完全的圆形(圆),否则,与元件的尺寸10px的X 10px的会.允许的最大值没有限制.

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

小提琴页面

编辑:如何计算像素值(px)？

Answer 1

正确的方法应该是

border-radius: 50%;

该规范规定,你可以在这里使用一个百分比值,它应该从的对应尺寸得出 border-box的元素.

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

如果你的元素不是正方形(高度!=宽度),你仍然可以使用它来获得一个漂亮的椭圆.

Answer 2

为什么不使用百分比？

border-radius: 50%;

只要确保将其应用于方形即可。