CSS 渐变是一种非常强大和灵活的技术，可以让网页元素看起来更加生动和有吸引力。本文将介绍 CSS 渐变的基本概念和使用方法。

基本语法

CSS 渐变的基本语法如下：

background-image: linear-gradient(to right, red, yellow);

这个例子创建了一个从左到右的红到黄的线性渐变。

线性渐变

线性渐变是指沿着一条直线方向渐变的颜色。

  • to right 表示渐变的方向是从左到右。
  • red 和 yellow 是渐变的起始和结束颜色。

径向渐变

径向渐变是从一个点或一个圆开始渐变。

background-image: radial-gradient(circle, red, yellow);

这个例子创建了一个以圆心为中心，从红色渐变到黄色的径向渐变。

重复渐变

有时你可能需要重复渐变来创建复杂的效果。

background-image: repeating-linear-gradient(to right, red 0%, yellow 50%);

这个例子创建了一个重复的红到黄渐变。

图片资源

更多关于 CSS 渐变的示例和技巧，请访问 CSS 渐变教程。

Gradient Example