CSS3之border-radius详解

作者:邹阳 | 发表于:2016-04-17 11:11:41

阅读量:(189) | 所属栏目:编程

        此属性用于设置或检索对象使用圆角边框。

        提供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。

        举例:div { border:2px solid; border-radius:25px; }   

需要注意的是:在制作圆角边框的时候,PC下用50%  移动端下就别用百分比了,有些手机不支持的。
回复内容:(还能输入1000字)
验 证 码: