css将div的圆角矩形 |css 布局切换

/*CSS代码*/
div {
border-radius: 10px; /*设置圆角半径*/
}

上述代码中，大家通过在div标签中加入border-radius属性，设定了圆角矩形的半径为10像素。这个值可以根据实际需要进行调整，让边角看起来更圆润或更锐利。

除了使用固定数值设定圆角半径之外，大家还可以使用百分比来控制圆角的弯曲程度。例如：

/*CSS代码*/
div {
border-radius: 50%; /*设置为圆形*/
}

上述代码将div标签的圆角半径设置为50%，使其呈现出圆形的效果。这种写法在实际应用中也非常常见，比如可以用来制作个人头像、按钮等。

在CSS中，大家还可以通过指定每个角的圆角半径，来实现不同的效果。例如：

/*CSS代码*/
div {
border-top-left-radius: 10px; /*设置左上角圆角半径*/
border-top-right-radius: 20px; /*设置右上角圆角半径*/
border-bottom-left-radius: 30px; /*设置左下角圆角半径*/
border-bottom-right-radius: 40px; /*设置右下角圆角半径*/
}

上述代码中，大家通过分别设定每个角的圆角半径，实现了四个角的半径不同的效果。这种写法非常灵活，可以根据需要制作各种不同的圆角效果。