您好,欢迎来到站长资源库!分享精神,快乐你我!
设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
焦点图全屏广告对联广告在线客服相册代码HTML/CSS滚动代码导航菜单悬浮漂浮
当前位置:首页 > 网页特效 > HTML/CSS

CSS3详解:border-radius

浏览:173 次  |  日期:2020-02-21
讲到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;

}


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

}


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

TAG标签
    2009-2020 © 懒人站长资源库  版权所有
    网站首页 - 矢量素材 - 图标素材 - 网页特效 - 图库素材 - 网站教程 - 网站源码 - FLASH素材 - 常用手册 - 共享软件
    QQ服务:564316500  邮箱服务:564316500@qq.com
    皖ICP备20003381号