borderradius属性的使用方法

border-radius用来实现圆角边框。

一般这么用&＃xff1a;

效果为&＃xff1a;

但是如果我把border-radius设为150px&＃xff0c;就会变成圆形边框

效果为&＃xff1a;

为了方便&＃xff0c;直接把border-radius设为50%也行。效果是一样的。

但是如果想画圆&＃xff0c;则width和height必须要相等&＃xff08;这应该是基本常识吧&＃xff09;。

事实上&＃xff0c;border-radius后可以接多个属性值&＃xff0c;像上面的一个属性值则默认四角都为该属性值&＃xff0c;若是四个属性值显然是与四角相对&＃xff0c;这么个相对法呢&＃xff1f;从左上角开始&＃xff0c;顺时针一一对应。

举例&＃xff1a;

效果为&＃xff1a;

我的天&＃xff0c;注意各属性值之间不要用“,”啊&＃xff0c;只需要空格就行了&＃xff0c;不小心用了个逗号结果输出一个正方形&＃xff0c;查了半天错。

划重点&＃xff0c;如果是三个属性值就比较迷了&＃xff0c;第一个值表示左上角&＃xff0c;第二个值表示右上角和左下角&＃xff08;对角&＃xff09;&＃xff0c;第三个值表示右下角。嘿嘿嘿&＃xff0c;没想到吧。这里就不举例了。

两个属性值倒也简单&＃xff0c;第一个值表示左上角和右下角&＃xff0c;第二个值表示右上角和左下角。没什么特别。亦不再多言。

另外&＃xff0c;还有斜杠二组值&＃xff1a;第一组值表示水平半径&＃xff0c;第二组值表示垂直半径&＃xff0c;每组值也可以同时设置1到4个值&＃xff0c;规则与上面相同。

具体用法为&＃xff1a;border-radius:60px/50px;

四个属性值采用如下方法&＃xff1a;border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

这个简直是个法宝啊&＃xff0c;我们可以用它来画各种不规则边框。不过说实话&＃xff0c;本人脑洞有点小&＃xff0c;设计的图案简直丑出天际。

举例画个鸡蛋吧&＃xff1a;

有点胖了&＃xff0c;长宽比调大一点就好了。

总而言之&＃xff0c;利用border-radius属性&＃xff0c;能画出很多有趣的边框&＃xff0c;只要脑洞大&＃xff0c;各种创意不在话下。