CSS背景颜色渐变案例：线性渐变和径向渐变效果实例详解
在网页设计中，背景颜色渐变是提升页面视觉层次感的常用手段，CSS本身提供了原生的渐变属性，不需要依赖图片就能实现丰富的渐变效果。CSS渐变主要分为线性渐变和径向渐变两类，下面通过具体实例详细介绍两者的用法和实际效果。
一、线性渐变（linear-gradient）
线性渐变是沿着一条直线方向进行颜色过渡的渐变效果，默认方向是从上到下，我们可以通过参数自定义渐变的方向、角度和颜色节点。
1. 基础线性渐变（默认方向）
下面的例子实现了从上到下的蓝色到浅蓝色的线性渐变，是最基础的线性渐变用法：
/* 基础线性渐变，默认从上到下 */
.linear-basic {
width: 300px;
height: 200px;
/* 第一个参数是渐变方向，省略时默认从上到下；后面是颜色节点，至少两个颜色 */
background: linear-gradient(#1e90ff, #87cefa);
}对应的HTML结构只需要一个带有对应类名的容器即可：
<div class="linear-basic"></div>
2. 自定义方向的线性渐变
我们可以通过关键词（如to right、to bottom right）或者角度值来指定渐变的方向，下面的例子实现了从左到右的橙红色渐变：
/* 从左到右的线性渐变 */
.linear-direction {
width: 300px;
height: 200px;
/* to right 表示渐变方向到右边，也可以写成角度值 90deg */
background: linear-gradient(to right, #ff7f50, #ff4500);
}如果需要对角线方向的渐变，可以使用to bottom right这类关键词，比如下面的例子实现从左上到右下的紫色渐变：
/* 左上到右下的对角线线性渐变 */
.linear-diagonal {
width: 300px;
height: 200px;
background: linear-gradient(to bottom right, #9370db, #4b0082);
}3. 多颜色节点的线性渐变
线性渐变支持设置多个颜色节点，还可以给每个颜色节点指定过渡的位置，下面的例子实现了三色渐变，并且指定了每个颜色的占比：
/* 多颜色节点线性渐变 */
.linear-multi-color {
width: 300px;
height: 200px;
/* 每个颜色后可以加百分比，表示颜色过渡的位置 */
background: linear-gradient(#ff0000 0%, #ffff00 50%, #00ff00 100%);
}二、径向渐变（radial-gradient）
径向渐变是从一个点开始，向外扩散的颜色过渡效果，默认形状是椭圆，中心点在容器正中心，我们可以通过参数调整渐变的形状、大小、中心位置和颜色节点。
1. 基础径向渐变
下面的例子实现了从中心向外扩散的粉色到浅粉色的径向渐变，是最基础的用法：
/* 基础径向渐变 */
.radial-basic {
width: 300px;
height: 200px;
/* 至少两个颜色，默认形状是椭圆，中心在容器中心 */
background: radial-gradient(#ff69b4, #ffb6c1);
}2. 自定义形状和大小的径向渐变
我们可以通过参数指定径向渐变的形状（circle表示圆形，ellipse表示椭圆）和大小，下面的例子实现了一个圆形径向渐变，渐变范围覆盖整个容器：
/* 圆形径向渐变，覆盖整个容器 */
.radial-circle {
width: 300px;
height: 200px;
/* circle 表示圆形，closest-side 表示渐变大小到最近的边为止 */
background: radial-gradient(circle closest-side, #00ced1, #afeeee);
}如果需要调整渐变的中心点位置，可以在形状参数后加上at关键词指定坐标，比如下面的例子将渐变中心调整到左上角：
/* 中心点在左上角的径向渐变 */
.radial-position {
width: 300px;
height: 200px;
/* at 20% 20% 表示中心点在容器宽度20%、高度20%的位置 */
background: radial-gradient(circle at 20% 20%, #ffd700, #fffacd);
}3. 重复径向渐变
如果需要实现重复的径向渐变效果，可以使用repeating-radial-gradient属性，下面的例子实现了一圈圈扩散的蓝绿色重复渐变：
/* 重复径向渐变 */
.radial-repeat {
width: 300px;
height: 200px;
/* 每个颜色后加百分比，表示重复的周期 */
background: repeating-radial-gradient(circle, #20b2aa 0%, #20b2aa 10%, #b0e0e6 10%, #b0e0e6 20%);
}三、兼容性说明
目前主流的现代浏览器都已经原生支持linear-gradient和radial-gradient属性，如果需要兼容旧版本的浏览器（如IE9及以下），可以添加前缀或者使用降级方案，比如先设置一个纯色背景，再写渐变属性，这样不支持渐变的浏览器会显示纯色背景：
/* 带兼容降级和前缀的写法 */
.gradient-compatible {
width: 300px;
height: 200px;
/* 降级纯色背景 */
background: #1e90ff;
/* 旧版webkit内核前缀 */
background: -webkit-linear-gradient(top, #1e90ff, #87cefa);
/* 旧版moz内核前缀 */
background: -moz-linear-gradient(top, #1e90ff, #87cefa);
/* 标准语法 */
background: linear-gradient(to bottom, #1e90ff, #87cefa);
}实际开发中可以根据项目的浏览器兼容要求选择是否添加前缀，大部分现代项目已经不需要再考虑旧版前缀的问题。