如何使用 CSS 创建圆角？

在CSS中创建圆角通常使用的属性是 border-radius。这个属性允许你为元素的四个角设置圆角效果，可以指定一个值来一次性设置所有四个角，或者指定多个值分别设置每一个角。以下是几种使用 border-radius 的方式：

1. 设置所有角的圆角

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px; /* 所有四个角都会有10px的圆角 */
}

2. 分别设置每个角的圆角

你可以分别指定每个角的圆角大小，顺序通常是从左上角开始，顺时针方向：

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px 15px 20px 25px; /* 左上角10px, 右上角15px, 右下角20px, 左下角25px */
}

3. 分别设置水平和垂直半径

对于每个角，border-radius 还可以接受两个值：第一个值是水平半径，第二个值是垂直半径。

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px 20px; /* 水平半径10px，垂直半径20px */
}

例子：创建一个圆形

如果你想用CSS创建一个完美的圆形，可以将元素的宽度和高度设置为相同的值，并将 border-radius 设置为50%：

css
.circle {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%; /* 创建一个圆形 */
}

这些是使用CSS border-radius 属性创建圆角的基本方法。根据具体需求，你可以灵活地调整这些值以达到期望的视觉效果。