css怎么设置圆角边框

CSS设置圆角边框

CSS中的border-radius属性可用于设置圆角边框。我们可以分别为每个角设置圆角半径，也可以使用简写形式来设置圆角。

下面我们将分别介绍如何为每个角设置圆角半径：

为单个角设置圆角半径

我们可以使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性来为单个角设置圆角半径。这些属性可以接受一个长度或百分比值作为参数。

    
border-top-left-radius: 30px;
border-top-right-radius: 20%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 15px;
    

上面的代码将为元素的左上角设置30像素的圆角半径，为右上角设置20%的圆角半径，为右下角设置50%的圆角半径，为左下角设置15像素的圆角半径。

使用简写形式设置圆角

为了使代码更简洁，我们可以使用border-radius属性来设置所有角的圆角半径。border-radius接受1到4个参数，每个参数可以是一个长度或百分比值。

如果只传递了1个参数，它将作为所有4个角的圆角半径值。

    
border-radius: 10px;
border-radius: 50%;
    

上面的代码将为元素的所有角设置10像素和50%的圆角半径。

如果传递了2个参数，第一个参数将作为左上角和右下角的圆角半径值，第二个参数将作为右上角和左下角的圆角半径值。

    
border-radius: 10px 20px;
border-radius: 20% 30%;
    

上面的代码将分别为元素的左上角和右下角设置10像素和20像素的圆角半径，为右上角和左下角设置20%和30%的圆角半径。

如果传递了3个参数，第一个参数将作为左上角的圆角半径值，第二个参数将作为右上角和左下角的圆角半径值，第三个参数将作为右下角的圆角半径值。

    
border-radius: 10px 20px 30px;
border-radius: 20% 30% 40%;
    

上面的代码将分别为元素的左上角、右上角和右下角设置10像素、20像素和30像素的圆角半径，为左下角、右上角和右下角设置20%、30%和40%的圆角半径。

如果传递了4个参数，它们将分别作为左上角、右上角、右下角和左下角的圆角半径值。

    
border-radius: 10px 20px 30px 40px;
border-radius: 20% 30% 40% 50%;
    

上面的代码将分别为元素的左上角、右上角、右下角和左下角设置10像素、20像素、30像素和40像素的圆角半径，为左下角、右上角、右下角和左下角设置20%、30%、40%和50%的圆角半径。