css中改变盒子的弧度

CSS中可以使用border-radius属性来实现改变盒子的弧度，该属性接受4个值，分别对应四个角的弧度值，如下：

.box {
    border-radius: 10px; /* 四个角都设置10px */
    border-radius: 10px 20px; /* 左上角和右下角设置10px，右上角和左下角设置20px */
    border-radius: 10px 20px 30px; /* 左上角设置10px，右上角和左下角设置20px，右下角设置30px */
    border-radius: 10px 20px 30px 40px; /* 左上角设置10px，右上角设置20px，右下角设置30px，左下角设置40px */
} 

也可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius单独控制每个角的弧度值，如下：

.box {
    border-top-left-radius: 10px; /* 左上角设置10px */
    border-top-right-radius: 20px; /* 右上角设置20px */
    border-bottom-left-radius: 30px; /* 左下角设置30px */
    border-bottom-right-radius: 40px; /* 右下角设置40px */
} 

除了使用像素值，还可以使用百分比来设置弧度值，如下：

.box {
    border-radius: 50%; /* 所有角都设置为盒子宽度的50%（即实现圆形效果） */
    border-top-left-radius: 10%; /* 左上角设置为盒子宽度的10% */
    border-top-right-radius: 20%; /* 右上角设置为盒子宽度的20% */
    border-bottom-left-radius: 30%; /* 左下角设置为盒子宽度的30% */
    border-bottom-right-radius: 40%; /* 右下角设置为盒子宽度的40% */
} 

border-radius属性还支持多个值的组合，用/符号隔开，第一个值设置水平方向的弧度，第二个值设置竖直方向的弧度，如下：

.box {
    border-radius: 10px 20px / 30px 40px; /* 左上角水平方向10px，竖直方向30px，右上角水平方向20px，竖直方向30px，右下角水平方向20px，竖直方向40px，左下角水平方向10px，竖直方向40px */
}