CSS边框:border-radius

自看楼主楼底

material

border-radius简介

border-radius属性在CSS边框中是比较常用的，本文将带你深入理解border-radius属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上border-radius的实例，希望能够对你有所帮助。

border-radius定义和用法

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

border-radius属性值

border-radius说明

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

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
对应的脚本特性为borderRadius。

来源：http://caibaojian.com/css3/properties/border/border-radius.htm

2020-01-16 10:37 举报

板块信息详情