热门关键字:
jquery > jquery教程 > jquery教程 > CSS3详解:border-radius

CSS3详解:border-radius

316
作者:管理员
发布时间:2021/1/25 19:30:57
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3441
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;
}


CSS3 border-radius 圆角矩形2:
.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}


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


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;
}


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




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐