今天小编跟大家讲解下有关css3 border-radius属性详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3 border-radius属性详解 的相关资料，希望小伙伴们看了有所帮助。
有什么用
这个radius属性 可不只是设置圆角 还可以用来画一些简单的图形。
画个圆形
#demo1 { width:100px; height:100px; background:red; border-radius: 50%; }上述50%就是说设置各边圆角都为50%。
那么如何画个半圆
如下 把宽度设置为高度的两倍。
#demo2 { width:100px; height:50px; background:green; border-radius: 50px 50px 0 0; }结果。如图 矩形为100*50 。然后左上角和右上角的圆角分别是50px。因此就是半圆了。
左侧半圆
#demo3 { width:50px; height:100px; background: pink; border-radius: 50px 0 0 50px; }画半圆了 关键是把握住宽度和高度的比例关系 先画个矩形 然后设置各个方向的圆角就可以了。注意顺序是从左上角开始的顺时针方向。
1/4圆呢
#demo4 { width:100px; height:100px; background:gray ; border-radius: 100px 0 0 0; }先画一个正方形 然后设置任意一个圆角为100%就可以。设置哪个角度是100%哪个角度就是弧线。
PS
css里并没有直接画圆的 而是通过圆角实现的 当然你也可以通过canvas来实现。
参考
2．半圆图解CSS3：核心技术与案例实战
来源：爱蒂网
