关注公众号

关注公众号

手机扫码查看

手机查看

喜欢作者

打赏方式

微信支付微信支付
支付宝支付支付宝支付
×

一篇文章带你了解CSS3圆角知识(二)

2020.9.28

wx_article_20200819080630_btKmIv.jpg

提示:

border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 属性的简写。

2. 为每个角指定弧度

如果只为border-radius属性指定一个值,则此半径将应用于所有4个角。

另外可以根据自己开发的需求,分别指定每个角。以下是规则:

四个值: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。

三个值: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。

两个值: 第一个值适用于左上和右下角,和二值适用于右上和左下角。

一个值: 所有的四个角都是圆的。

实例1:

1.四个值 - border-radius: 15px 50px 30px 5px

#rcorners4 {    border-radius: 15px 50px 30px 5px;    background: #f00;    padding: 20px;    width: 200px;    height: 150px;}

wx_article_20200819080630_NKQyFB.jpg

2.三个值 - border-radius: 15px 50px 30px

#rcorners5 {    border-radius: 15px 50px 30px;    background: #f00;    padding: 20px;    width: 200px;    height: 150px;}

wx_article_20200819080630_ejqHEG.jpg

3.两个值 - border-radius: 15px 50px

#rcorners6 {    border-radius: 15px 50px;    background: #f00;    padding: 20px;    width: 200px;    height: 150px;}

wx_article_20200819080630_UY8tzF.jpg



推荐
关闭