用Css写圆角边框

转载 2011年10月17日 10:02:07

css3很给力,用css3写圆角非常方便,只需设置border-radius值即可

设置border-radius值的在线工具地址:http://border-radius.com/

原文来自:http://www.daqianduan.com/css3-border-radius/

讲到css3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。

CSS3 border-radius是什么?

border-radius的含义是:圆角。

CSS3 border-radius的书写格式:

border-radius:apx,比较常见,其中a表示数值,下同;

-webkit-border-top-left-radius:apx,类似这种的写法还是很实用的,但一定要记住顺序,一句话:先写Y轴,再写X轴

注意:上诉的-webkit-是兼容webkit内核的写法,-moz-内核的写法有所不同,如:-moz-border-radius-topleft:apx

下面我们通过几个实例演示说明border-radius的用法:

CSS3 border-radius 圆角矩形:

.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

border-radius

CSS3 border-radius 圆角矩形2:

.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}

border-radius

CSS3 border-radius 圆:

.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}

border-radius

CSS3 border-radius 漂亮圆角:

.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}

border-radius

CSS3 border-radius 椭圆:

.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}

能做的事情很多,更多技巧靠你发掘啦!



收藏助手
不良信息举报
您举报文章:用Css写圆角边框
举报原因:
原因补充:

(最多只允许输入30个字)