[分享]css只有两个角是圆角

CSS中，可以使用borderradius属性来让四个角都是圆角，但是如果只想让元素的左上角和右下角为圆角，怎么办呢？ borderradius: 0 0 20px 0; 上面这段CSS代码表示的是，...

CSS中，可以使用border-radius属性来让四个角都是圆角，但是如果只想让元素的左上角和右下角为圆角，怎么办呢？

 border-radius: 0 0 20px 0; 

上面这段CSS代码表示的是，将元素的左下角和右下角都设置为0，而左上角和右上角的圆角半径都为20px。

我们也可以将代码稍微改动一下，来让左上角和右下角的圆角半径都为50%。

 border-radius: 50% 0 0 50%; 

这段CSS代码中，50%表示的是半径大小为元素宽度和高度的一半。

最后再分享一个实例，让一个元素的左上角和右下角都为圆角，并且还给它添加了阴影效果。

 .box{
        width: 200px;
        height: 100px;
        background-color: #eee;
        border-radius: 50% 0 0 50%;
        box-shadow: 3px 3px 5px #888;
    } 

以上就是让CSS只有两个角是圆角的方法，希望对大家有所帮助。