css3中改变弧度的属性 |css li下拉菜单

.box {
width: 200px;
height: 200px;
background-color: #c5e1a5;
border-radius: 50%;
}

上面的代码会使一个200×200的正方形元素变成一个圆形元素。border-radius的值50%表示将元素的宽度和高度都设置为半径。

大家还可以同时设置不同的水平和垂直半径，以实现椭圆形效果。

.box {
width: 200px;
height: 150px;
background-color: #c5e1a5;
border-radius: 50%/25%;
}

上面的代码会将一个200×150的矩形元素变成一个水平半径为宽度一半，垂直半径为高度四分之一的椭圆形元素。

除此之外，大家还可以设置每个角的半径。

.box {
width: 200px;
height: 200px;
background-color: #c5e1a5;
border-radius: 20px 0px 40px 60px;
}

上面的代码会使一个200×200的正方形元素的左上角设置20px的半径、右上角不设置、右下角设置40px的半径、左下角设置60px的半径。

总结来说，border-radius是一个非常实用的属性，可以让大家在页面中制作出各种形状的元素，提升页面的美观程度。