1. 简介
CSS（Cascading Style Sheets）是一种用来为网页添加样式的语言。CSS3是CSS的最新版本，它增加了很多新的属性和选择器，其中渐变属性就是其中之一。渐变可以产生非常炫酷的效果，例如背景图形的淡入淡出、色彩的平滑过渡等等。
2. 线性渐变
线性渐变是一种沿着直线方向进行的渐变效果，通常通过两个或多个颜色之间的平滑过渡来实现。下面是线性渐变的语法：
background: linear-gradient(direction, color1, color2, ...);
2.1 方向
方向指定了渐变的方向。有四个可选值：to top（从下到上）、to right（从左到右）、to bottom（从上到下）和to left（从右到左）。下面是一个示例：
/* 从下到上的渐变效果 */
background: linear-gradient(to top, red, blue);
2.2 颜色
颜色指定了渐变的颜色。在渐变中，至少需要指定两个颜色。你也可以指定任意多个颜色，从而产生更平滑的过渡。下面是一个示例：
/* 从左到右的渐变效果 */
background: linear-gradient(to right, red, green, blue);
3. 径向渐变
径向渐变是一种由中心向周围进行的渐变效果，通常通过两个或多个颜色之间的平滑过渡来实现。下面是径向渐变的语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);
3.1 形状
形状指定了渐变的形状。有两个可选值：circle（圆形）和ellipse（椭圆形）。下面是一个示例：
/* 以圆形方式径向渐变 */
background: radial-gradient(circle, red, blue);
3.2 大小
大小指定了渐变的大小。有两个可选值：closest-side（从中心到最近的边缘）和farthest-side（从中心到最远的边缘）。下面是一个示例：
/* 从中心到最远的边缘径向渐变 */
background: radial-gradient(circle farthest-side, red, blue);
3.3 位置
位置指定了渐变的起始位置。可以使用关键字或百分比来表示。下面是一个示例：
/* 从中心到最远的边缘径向渐变 */
background: radial-gradient(circle farthest-side at 20% 50%, red, blue);
3.4 颜色
颜色指定了渐变的颜色。在渐变中，至少需要指定两个颜色。你也可以指定任意多个颜色，从而产生更平滑的过渡。下面是一个示例：
/* 以椭圆形方式径向渐变 */
background: radial-gradient(ellipse, red, green, blue);