有什么用?
这个radius属性,可不只是设置圆角,还可以用来画一些简单的图形。
画个圆形
上述50%就是说设置各边圆角都为50%。
那么如何画个半圆?
如下,把宽度设置为高度的两倍。
结果。如图,矩形为100*50 。然后左上角和右上角的圆角分别是50px。因此就是半圆了。
左侧半圆
画半圆了,关键是把握住宽度和高度的比例关系,先画个矩形,然后设置各个方向的圆角就可以了。注意顺序是从左上角开始的顺时针方向。
1/4圆呢?
先画一个正方形,然后设置任意一个圆角为100%就可以。设置哪个角度是100%哪个角度就是弧线。
PS
css里并没有直接画圆的,而是通过圆角实现的,当然你也可以通过canvas来实现。
参考
2.半圆图解CSS3:核心技术与案例实战
标签: border 详解 border-radius
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!