利用css实现渐变色(通俗易懂)

CSS中实现渐变色可以使用linear-gradient或radial-gradient函数。

以下是一个使用linear-gradient的例子，它创建一个从顶部(蓝色)到底部(红色)的线性渐变：




.gradient-box {
  background-image: linear-gradient(to bottom, blue, red);
  height: 200px;
  width: 200px;
}

HTML部分：




<div class="gradient-box"></div>

如果你想要一个径向渐变，从中心(蓝色)到边缘(红色)，可以这样写：




.gradient-box {
  background-image: radial-gradient(circle, blue, red);
  height: 200px;
  width: 200px;
}

HTML部分依然是：




<div class="gradient-box"></div>

这些CSS规则应用于一个具有指定宽高的div元素，并使其背景填充上指定的渐变效果。