CSS: 用一种颜色修改圆的一半，另一种颜色修改另一半

在本文中，我们将介绍如何通过 CSS 实现将圆的一半修改为一种颜色，另一半修改为另一种颜色的效果。这个效果可以为页面增添一些不同寻常的元素，并吸引用户的注意力。我们将使用 CSS 的一些属性和技巧来实现这一效果。

阅读更多：CSS 教程

使用背景线性渐变

我们可以使用 CSS 的 background 属性中的线性渐变来实现圆的一半不同颜色的效果。首先，我们需要创建一个圆形的元素，可以使用 border-radius 属性来设置元素的边界弧度为50%，从而将元素的形状变为圆形。接下来，我们可以使用 background 属性的线性渐变来设置两种颜色的区块。

以下是一个示例代码：

.circle {
  width: 200px;  // 设置圆形元素的宽度
  height: 200px;  // 设置圆形元素的高度
  border-radius: 50%;  // 将元素的边界弧度设置为50%以创建圆形
  background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);  // 使用线性渐变设置两种颜色的区块
}

在上面的示例代码中，我们使用 linear-gradient 函数来创建一个线性渐变。函数的第一个参数 to right 表示这个线性渐变是从左到右的。接下来的每一组颜色和位置都代表了一个区块，从左到右分别是红色和蓝色，每个颜色占据50%的区块。

通过将上面的 CSS 代码应用到一个 HTML 元素上，我们可以看到一个上半部分是红色，下半部分是蓝色的圆：

<div class="circle"></div>

使用伪元素

除了使用背景线性渐变之外，我们还可以使用 CSS 的伪元素来实现将圆的一半修改为一种颜色，另一半修改为另一种颜色的效果。我们可以使用 ::before 或 ::after 伪元素来创建一个覆盖在圆上一半区域的元素，然后为这个覆盖元素设置一种颜色。

以下是一个示例代码：

.circle {
  position: relative;  // 设置元素相对定位，以便伪元素可以相对于它定位
  width: 200px;  // 设置圆形元素的宽度
  height: 200px;  // 设置圆形元素的高度
  border-radius: 50%;  // 将元素的边界弧度设置为50%以创建圆形
}

.circle::before {
  content: "";  // 设置伪元素的内容为空
  position: absolute;  // 设置伪元素绝对定位
  top: 0;  // 将伪元素定位于元素的顶部
  left: 0;  // 将伪元素定位于元素的左侧
  width: 50%;  // 设置伪元素的宽度为元素的一半
  height: 100%;  // 设置伪元素的高度为元素的高度
  background-color: red;  // 设置伪元素的背景颜色为红色
}

在上面的示例代码中，我们首先将圆形元素设置为相对定位，以便伪元素可以相对于它进行定位。然后，我们创建一个 ::before 伪元素，并将其定位于圆形元素的顶部和左侧，宽度为元素的一半，高度为元素的高度，并将其背景颜色设置为红色。

同样地，通过将上面的 CSS 代码应用到一个 HTML 元素上，我们可以看到一个上半部分是红色，下半部分是默认背景颜色的圆：