CSS 创建一个底半部分为一种颜色、顶半部分为另一种颜色的 div

在本文中，我们将介绍如何使用 CSS 创建一个底半部分为一种颜色、顶半部分为另一种颜色的 div 元素。

阅读更多：CSS 教程

使用线性渐变实现底半部分和顶半部分的颜色

我们可以使用 CSS 的线性渐变（linear-gradient）来实现底半部分和顶半部分不同颜色的效果。具体步骤如下：

创建一个 div 元素，为其添加一个类名。例如，我们添加一个 class="color-div"。
在 CSS 中，为该类名编写样式。
```
.color-div {
 background: linear-gradient(to bottom, yellow 50%, blue 50%);
 height: 200px;
}
```
在这个示例中，我们使用线性渐变将黄色（yellow）作为底半部分的颜色，并将蓝色（blue）作为顶半部分的颜色。我们将渐变方向设置为从顶部到底部（`to bottom`），并将颜色变化的位置设置为50%。
在 HTML 中使用该 div：
```
<div class="color-div"></div>
```

你可以根据需要修改底半部分和顶半部分的颜色，以及渐变的方向和位置。例如，如果你想将底半部分的颜色定为红色（red），顶半部分的颜色定为绿色（green），可以将上述 CSS 代码修改如下：

“`css
.color-div {
background: linear-gradient(to bottom, red 50%, green 50%);
height: 200px;
}
“`

这样，你就可以创建一个底半部分为红色、顶半部分为绿色的 div。

使用伪元素实现底半部分和顶半部分的颜色

除了使用线性渐变，我们还可以使用 CSS 的伪元素（pseudo-element）来实现底半部分和顶半部分不同颜色的效果。具体步骤如下：

创建一个 div 元素，为其添加一个类名。例如，我们添加一个 class="color-div"。

在 CSS 中，为该类名编写样式。

.color-div {
 position: relative;
 height: 200px;
}

.color-div::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 50%;
 background-color: yellow;
}

.color-div::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 50%;
 background-color: blue;
}

在这个示例中，我们使用伪元素 ::before 和 ::after 来创建底半部分和顶半部分的颜色。我们将 ::before 元素的高度设置为 50%，并将其背景颜色设置为黄色；将 ::after 元素的高度也设置为 50%，并将其背景颜色设置为蓝色。