欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!
您现在的位置:web记录 > 前端开发 > Html5+css3 >

css3圆角属性border-radius实例讲解

更新时间:2014-04-08 浏览次数:

说明:

设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数 

水平半径:

如果提供四个参数值,将按上左、上右、下右、下左的顺序作用于四个角。 

如果提供一个,将用于全部的于四个角。 

如果提供两个,第一个用于上左、下右,第二个用于上右、下左。 

如果提供三个,第一个用于上左,第二个用于上右、下左,第三个用于下右。 

垂直半径也遵循以上4点。 

border-top-left-radius属性

说明:

设置或检索对象的左上角圆角边框。

如设置border-top-left-radius:5px 10px;

表示top-left这个角的水平圆角半径为5px,垂直圆角半径为10px。 

border-top-right-radius属性

说明:

设置或检索对象的右上角圆角边框。

如设置border-top-right-radius:5px 10px;

表示top-right这个角的水平圆角半径为5px,垂直圆角半径为10px。 

border-bottom-right-radius 属性

说明:

设置或检索对象的左下角圆角边框

如设置border-bottom-right-radius:5px 10px;

表示bottom-right这个角的水平圆角半径为5px,垂直圆角半径为10px。 

border-bottom-left-radius 属性

说明:

设置或检索对象的左下角圆角边框。 

如设置border-bottom-left-radius:5px 10px;

表示bottom-left这个角的水平圆角半径为5px,垂直圆角半径为10px。 
 

关键词:

    + 相关信息

    前端案例

    返回顶部 欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!