CSS3详解:border-radius

时间:2018-01-26 17:04:54 来源:

【摘要】 讲到css3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。CSS3 border-radius是什么?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;}


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


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

上一篇      下一篇
前端相关推荐 更多>>
CSS3视频详解新增属性及相关用法 CSS3详解:border color 详解CSS中:nth-child的用法 CSS3详解:background CSS3动画-wordpress读者墙 CSS3实例:纯CSS3写Google Chrome新LOGO
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net