在网页上搞一些渐变色的需求往往是为了让网站的样子看起来更加的炫酷，比如网站中的button背景色我们可以将它设置为将变的效果。

在以往的方案中，可以做一个带有渐变色的button按钮来实现，不过随着css3的出现，我们可以使用css3的渐变属性来完成。

css 渐变是指使用两种或者两种以上的颜色进行平滑过渡，css3中有两种渐变。

  1. linear-gradient ：线性渐变，线性渐变指的是沿着一条直线渐变，可以是从上到下，从左到右或者对角线都可以。
  2. radial-gradient： 径向渐变，径向渐变指的是由中心点向外延申的渐变。

下面分别介绍这两种渐变的方法。

linear-gradient ：线性渐变

线性渐变的语法

background: linear-gradient (direction, color-stop1, color-stop2.....);

其中direction的方向可以为：向上/向下/向左/向右和对角线。direction的属性值分别为:

  1. to bottom：默认值，表示从上到下；
  2. to left：表示从右到左；
  3. to right：表示从左到右；
  4. to top：表示从下到上；
  5. to right bottom：表示从左上到右下；
  6. to right top：表示从左下到右上；
  7. to left bottom：表示从右上到左下；
  8. to left top：表示从右下到左上。

color-stop1, color-stop2.....表示多个渐变的颜色值。

线性渐变的例子

1) 线性渐变从上到下，它是默认值。

<!DOCTYPE html>
<html>
	<title>css 线性渐变色例子-从上到下</title>
<head>
<style>
#grad1 {
	width:400px;
    height: 100px;
    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>线性渐变-从上到下</h3>
<p>这个线性渐变从顶部开始。它从红色开始，过渡到绿色：</p>
<div id="grad1"></div>
</body>
</html>

输出效果如下：

css 渐变色

2） 线性渐变，从左到右

<!DOCTYPE html>
<html>
	<title>css 线性渐变色例子-从左到右</title>
<head>
<style>
#grad1 {
	width:400px;
    height: 100px;
    background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>线性渐变-从左到右</h3>
<p>这个线性渐变从左侧开始。它从红色开始，过渡到绿色：</p>
<div id="grad1"></div>
</body>
</html>

输出效果如下：

css 渐变色

3) 线性渐变，对角线

 <!DOCTYPE html>
<html>
	<title>css 线性渐变色例子-对角线</title>
<head>
<style>
#grad1 {
	width:400px;
    height: 100px;
    background: -webkit-linear-gradient(left top, red , green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>线性渐变-对角线</h3>
<p>这个线性渐变从左上角开始。它从红色开始，过渡到绿色：</p>
<div id="grad1"></div>
</body>
</html>

输出效果如下：

css 渐变色

radial-gradient： 径向渐变

径向渐变前面已经说了，它是指的是由中心点向外延申的渐变。

径向渐变语法

radial-gradient(shape size at position, color-stop1, color-stop2, ...);
或者 
radial-gradient(形状 at 位置,颜色 位置,颜色 位置,颜色 位置)

参数说明：

形状shape：

  •  circle 圆形
  • ellipse 椭圆，默认值
  • closest-side 近边
  • closest-corner 近角
  • farthest-side 远边
  • farthest-corner 远角

大小size：

  • farthest-conner（默认）：指定径向渐变的半径长度为从圆心到离心最远的角
  • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
位置position:
  •   top right left center bottom 位置方位词在前面需要加上`at`，默认值是center
  • 100px 直接用像素
其中形状shape的默认值为 ellipse 椭圆，大小size的默认值为farthest-conner；位置position为center。

径向渐变例子

1） 均匀渐变

 <!DOCTYPE html>
<html>
	<title>css 径向渐变色例子-均匀</title>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */
    background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>径向渐变-均匀间隔</h3>
<div id="grad1"></div>
</body>
</html>
输出如下：

css 渐变色

2） 非均匀

 <!DOCTYPE html>
<html>
	<title>css 径向渐变色例子-非均匀</title>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>径向渐变-非均匀</h3>
<div id="grad1"></div>
</body>
</html>
效果如下：

css 渐变色