html – Border-radius：50％vs. border-radius：999em [复制]

概述参见英文答案 > Border-radius in percentage (%) and pixels (px) or em                                    3个 在探索Medium的令人敬畏的标记时,发现了一种有趣的方法,通过使用border-radius：999em制作漂亮的药丸样式按钮.然而,这提出了一个问题：为什么边界半径：50％是椭圆而不是药丸？ 这 @H_404_4@ 参见英文答案 > Border-radius in percentage (%) and pixels (px) or em                                    3个
在探索Medium的令人敬畏的标记时,发现了一种有趣的方法,通过使用border-radius：999em制作漂亮的药丸样式按钮.然而,这提出了一个问题：为什么边界半径：50％是椭圆而不是药丸？

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

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

但是当你使用border-radius：50％时,它会将边框设置为整个对象的比例,假设x轴为宽度的50％,y轴为对象高度的50％,所有角落组合使得它看起来好像是圆形的.

但要注意半径边界的百分比,因为并非所有浏览器都广泛支持,请检查this link和this one.

Note: In Safari percentage values for border-radius only supported in 5.1+. In Opera,only supported in 11.5+.

@H_404_4@ @H_404_4@ @H_404_4@ @H_404_4@ 总结

以上是内存溢出为你收集整理的html – Border-radius：50％vs. border-radius：999em [复制]全部内容，希望文章能够帮你解决html – Border-radius：50％vs. border-radius：999em [复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。