给card卡片增加圆角

如何使用 `border-radius` 为卡片添加圆角

目录

一：理解 `border-radius` 属性

二：准备 HTML 结构

三：应用基本样式

四：逐步增加圆角

五：增加所有圆角

欢迎来到 WebCat 卡片设计教程！在这里，我们将深入学习如何使用 CSS 的 `border-radius` 属性来为卡片添加圆角，从而让界面看起来更加柔和和吸引人。`border-radius` 属性允许我们定义元素边界上的圆角大小，这可以增强用户界面的视觉效果。现在开始吧！

---

一：理解 `border-radius` 属性

`border-radius` 属性可以接受1至4个值，分别控制四个角的圆角大小：

1. 第一个值是 **左上角** 的圆角半径。

2. 第二个值是 **右上角** 的圆角半径。

3. 第三个值是 **右下角** 的圆角半径。

4. 第四个值是 **左下角** 的圆角半径。

如果只提供一个值，那么所有四个角都将具有相同的圆角大小。如果提供了两个值，则第一个值用于左上和右下角，第二个值用于右上和左下角。当有三个或四个值时，它们按顺序应用到每个角上。

二：准备 HTML 结构

在HTML中添加div元素使用class或id给div元素增加命名为card，如下所示：

```html
<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
```

三：应用基本样式

在 CSS 中，给 `.card` 类添加一些基础样式，比如背景颜色和宽度高度：

```css
.card {
  background-color: blue;
  width: 200px;
  height: 200px;
  border-radius: 0;
}
```

四：逐步增加圆角

从第一个卡片开始，逐步为每一个卡片增加圆角，直到所有卡片的四个角都有圆角。

1. 为第一个卡片增加左上角圆角首先只给第一个卡片的左上角添加圆角：

  border-radius: 10px 0 0 0;

2. 为第二个卡片增加右上角圆角
接着，我们在第二个卡片的右上角添加圆角：

  border-radius: 10px 10px 0 0;

3. 为第三个卡片增加右下角圆角，给第三个卡片的右下角添加圆角：

  border-radius: 10px 10px 10px 0;

4. 为第四个卡片增加左下角圆角
最后，我们为第四个卡片的左下角添加圆角：

  border-radius: 10px 10px 10px 10px;

五：增加所有圆角

以上已经为每个卡片的角增加了圆角。为了完成整个过程，将为每个卡片添加剩余的圆角：

/* 简化直接 */

.card {
   width: 200px;
   height: 200px;
   background-color: blue;
   border-radius: 10px 10px 10px 10px;
}

.card {
   border-radius: 20px;
}