·您当前的位置:主页 > 技术教程 > Html5技术 >

[CSS3]border-radius圆角用法

时间:2019-01-25 16:08w3school
必须出现一个值,可长度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行

w3c属性值详解:
[ <length> | <percentage> ]:必须出现一个值,可长度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
{1,2}: 表示他们的值最小可以重复一次,最大可重复两次。假如只有一个值,表示圆角,那么它的水平距离和垂直距离相等,即第二个值复制第一个值;假如是两个值,那么确定一个椭圆角,第一个值椭圆的水平半径,第二值为椭圆的垂直半径,说起来有点拗口,直接上图:

只有1个值,如:border-top-left-radius:50px,表示半径为50px圆,如图:
左上角
标注错误了,盒子尺寸为:300*100

假如有两个值,如:border-top-left-radius:50px 100px,表示水平半径为50px,垂直半径为100px的椭圆,如图:
左上角

同理 border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),也是如此。你只要记住当某个角为一个值时,确定是一个圆,当使用两个值确定一个椭圆。

热门文章推荐

请稍候...