站长资讯网
css3中的渐变可以分为：1、线性渐变，语法为“linear-gradient(渐变方向,颜色1, 颜色2, …);”；2、径向渐变，语法为“radial-gradient(圆的类型 渐变大小 渐变位置,颜色1,颜色2);”。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
CSS3中的渐变分为哪几类
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
-
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
-
径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
CSS 语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
-
direction 用角度值指定渐变的方向（或角度）。
-
color-stop1, color-stop2,… 用于指定渐变的起止颜色。
示例如下：
<html> <head> <meta charset="utf-8"> <title>123</title> <style> #grad1 { height: 200px; background-color: red; /* 不支持线性的时候显示 */ background-image: linear-gradient(to bottom right, red , yellow); } </style> </head> <body> <h3>线性渐变 - 对角</h3> <p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p> </body> </html>
输出结果：
径向渐变
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个终止色。
CSS 语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
size 定义渐变的大小，可能值：
-
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
-
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
-
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
-
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置。可能值：
-
center（默认）：设置中间为径向渐变圆心的纵坐标值。
-
top：设置顶部为径向渐变圆心的纵坐标值。
-
bottom：设置底部为径向渐变圆心的纵坐标值。
-
start-color, …, last-color 用于指定渐变的起止颜色。
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> #grad1 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */ } #grad2 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>径向渐变 - 形状</h3> <p><strong>椭圆形 Ellipse（默认）：</strong></p> <div id="grad1"></div> <p><strong>圆形 Circle：</strong></p> <div id="grad2"></div> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
输出结果：
（学习视频分享：css视频教程）
