本文共 4720 字，大约阅读时间需要 15 分钟。

CSS3为背景了线性渐变支持，这样就允许开发者进行更多灵活的背景设置。

1.使用line-gradient设置线性渐变

CSS3为线性渐变提供了line-gradient函数，linear-gradient() 用于创建一个线性渐变的 "图像"。语法格式如下所示：

line-gradient（方向？ 颜色列表）

上面语法中的方向用于指定线性渐变的方向，该方向可以省略。如果省略指定方向，线性渐变的方向默认是从上到下。方向参数支持如下属性。

 下面代码示范了不同方向的线性渐变。

	
   	
   		background:linear-gradient(red, blue)、红蓝线性渐变
   
to topto bottomto leftto rightto left topto right topto left bottomto right bottom

上面代码中定义的第一个div元素，通过background属性指定了线性渐变，没有为该线性渐变指定方向，因此默认是从上到下。linear-gradient()中的颜色只给出了red和blue两种颜色，意味着线性渐变的开始是红色，最后是蓝色，如下图所示。图片中还有8个按钮，分别就是渐变方向参数的8个属性。

除了使用简单的to top、to bottom等控制线性渐变方向之外，CSS3也允许通过角度来指定线性渐变的方向，如下面代码所示。

	
   	
   		background:linear-gradient(0deg, red, blue)、红蓝线性渐变
   
角度：

通过background属性指定线性渐变，并且为线性渐变指定了方向：0deg（从下到上的12点方向）。

图片中定义了一个滑动条，它可以改变线性背景的方向（顺时针旋转），比如将角度设置为45°，那么线性渐变的方向就是从左下角到右上角，如下图所示。

颜色列表最简单的形式就是红到蓝，分别表示线性渐变颜色的开始和结束，其实我们可以指定多种颜色，也可以指定多种颜色的位置（可以用百分比和长度值显示）。如果这些颜色指定了位置，那么线性渐变将会平均分布这些颜色，下面代码所示。

	
   	
   		background:linear-gradient(30deg, red, green, blue)、红绿蓝线性渐变
   
background:linear-gradient(45deg, red, green, blue, yellow)、红绿蓝黄线性渐变
   
background:linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))、透明度改变的线性渐变
   
background:linear-gradient(135deg, red 20%, green 40%, blue 70%)、红绿蓝线性渐变
   
background:linear-gradient(150deg, red 30%, green 40%, blue 60%, yellow 70%)、红绿蓝黄线性渐变
   
background:linear-gradient(200deg, red 40px, green 60px, blue 90px)、红绿蓝线性渐变
   

浏览器中的效果图如下。

2.使用repeating-linear-gradient设置循环线性渐变

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。语法如下：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

循环线性渐变会利用给出的渐变颜色，从而形成更绚丽的背景，如下面代码所示。

	
   	
   		background:repeating-linear-gradient(red, blue 10%, magenta 20%)
红、蓝、洋红循环线性渐变
   
角度：

 repeating-linear-gradient设置的线性渐变会利用给出的red、blue、magenta这三种颜色来生成渐变背景。与普通线性渐变相同的是，循环线性渐变同样支持指定方向，指定方向的方式也一样。

3.使用radial-gradient设置径向渐变

CSS3还提供了radial-gradient函数设置径向渐变，radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。语法如下：

background: radial-gradient(形状? 大小? at x坐标 y坐标, 颜色列表);

下面代码示范了通过位置改变径向渐变的圆心。

	
   	
   		background:repeating-radial-gradient(red, blue 30px, magenta 50px)
红、蓝、洋红循环径向渐变
   
x：
y：

效果图：

CSS3也允许使用数值（包括百分比和长度值）来指定径向渐变的圆心，下面代码所示。

	
   	
   		background:radial-gradient(red, blue)、红蓝径向渐变
   
x：
y：

效果图：

下面代表示范了通过大小控制圆心的径向渐变的半径的方法。

	
   	
   		background:radial-gradient(red, blue)、红蓝径向渐变
   
closest-sidefarthest-sideclosest-cornerfarthest-corner

效果图：

CSS3也允许使用数值来指定径向渐变的大小，下面代码所示。

	
   	
   		background:radial-gradient(red, blue)、红蓝径向渐变
   
椭圆渐变：
横向半径：
纵向半径：

效果图：

 径向渐变既可以指定多种颜色又可以为各种颜色指定位置，如果为这些颜色指定位置，那么径向渐变将会平均分布这些颜色，如下面代码所示。

	
   	
   		background:radial-gradient(at 40px 90px, red, green, blue)
红绿蓝指定圆心的径向渐变
   
background:radial-gradient(ellipse, red, green, blue)
红绿蓝指定形状的径向渐变
   
background:radial-gradient(20px, red, green, blue)
红绿蓝指定大小的径向渐变
   
background:radial-gradient(at 100px 50px, red, green, blue, yellow)
红绿蓝黄指定圆心的径向渐变
   
background:radial-gradient(ellipse at 100px 50px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))
透明度改变指定形状、圆心的径向渐变
   
background:radial-gradient(circle 50px, red 20%, green 40%, blue 70%)
红绿蓝指定形状、大小的径向渐变
   
background:radial-gradient(circle 50px at 150px 60px, red 20%, green 40%, blue 70%)
红绿蓝指定形状、大小、圆心的径向渐变
   
background:radial-gradient(ellipse 100px 30px at 150px 60px, red 30%, green 40%, blue 60%, yellow 70%)
红绿蓝黄指定形状、大小、圆心的径向渐变
   

效果图： 

 4.使用repeating-radial-gradient设置循环径向渐变

用重复的径向渐变创建图像。repeating-radial-gradient()的语法与radial-gradient()相同。下面代码示范了循环径向渐变的功能。

	
   	
   		background:repeating-radial-gradient(red, blue 30px, magenta 50px)
红、蓝、洋红循环径向渐变
   
x：
y：

效果图： 

使用repeating-radial-gradient设置循环径向渐变，使用给出的blue、red、magenta三种颜色来生成渐变背景。 

6.线性渐变和径向渐变的区别

简单来说，线性渐变是直线渐变，径向是圆形的渐变。

线性渐变：比如从左向右拖，它就会按照从左向右笔直进行渐变。

径向渐变：从起点到终点颜色从内到外进行圆形渐变。

------------如果大家喜欢的博客，可以点击左上角的关注哦。

转载地址：http://eypti.baihongyu.com/