边界半径:50%对边界半径:999em

Question

在探索Medium的令人敬畏的标记时,发现了一种有趣的方法,通过使用border-radius:999em制作漂亮的药丸样式按钮.然而,这提出了一个问题:为什么边界半径:50%是椭圆而不是药丸？

这是一个实例:http://codepen.io/evergreenv/pen/ykpBA/

Answer 1

边界半径属性尽可能border-radius: 999em保持整体半径之间的相同比例,当您使用时,它保持与最小角落相同的比例.

但是在使用时border-radius: 50%,它会将边框设置为整个对象的比例,假设x轴为宽度的50%,y轴为对象高度的50%,所有角落组合使其显示为如果对象是圆形的.

但要注意半径边界的百分比,因为它并没有被所有浏览器广泛支持,请检查此链接和此链接.

注意:在Safari中,border-radius的百分比值仅在5.1+中受支持.在Opera中,仅支持11.5+.