码迷,mamicode.com
首页 > 其他好文 > 详细

border-radius的参数

时间:2017-12-06 14:24:45      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:一个   val   顺时针   order   顺序   plain   nbsp   w3c   官方   

border-radius的参数:

据w3c上的官方解释,是这样子的:

border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四个值,length和%指的是值的单位。

border可以带四个参数分别设置四个边框(上左下右的顺序),同样的,border-radius也可以带四个参数,并且以顺时针的方向解析,上左,上右,下右,下左

两个参数的时候,是上左和下右,上右和下左,比如.div1{border-radius: 2em 1em}

三个参数的时候,是上左,上右和下左,下右,比如.div1{border-radius: 2em 1em 3em}

.div1{border-radius: 2em/1em}

那么以斜杠/分开后面的参数是怎么回事呢?是这样子的,第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,所以你现在就可以画一个左右不对称的圆角啦:

border-radius的参数

标签:一个   val   顺时针   order   顺序   plain   nbsp   w3c   官方   

原文地址:http://www.cnblogs.com/ampl/p/7992196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!