border-radius的参数

时间:2017-12-06 14:03:30   收藏:0   阅读:203

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}

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

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

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!