CSS3 的渐变效果（Gradient）线性渐变左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
清单 13. 左到右的渐变1
| background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
|
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。效果图如下：
图 6. 简单线性渐变效果图 同理，也可以有从上到下，任何颜色间的渐变转换：
图 7. 各种不同线性渐变效果图 还有复杂一点的渐变，如：水平渐变，33% 处为绿色，66% 处为橙色：
清单 14. 复杂线性渐变1
2
| background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
|
这里的“color-stop”为拐点，可见效果图：
图 8. 复杂线性渐变效果图 径向渐变接下来我们要介绍径向渐变（radial），这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子：
清单 15. 径向渐变（目标圆半径为 0）1
2
| backgroud:
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
|
前面“50,50,50”是起始圆的圆心坐标和半径，“50,50,0”蓝色是目标圆的圆心坐标和半径，“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下，和放射由内至外不一样，径向渐变刚好相反，是由外到内的渐变。清单 15 标识的是两个同心圆，外圆半径为 50px，内圆半径为 0，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：
图 9. 径向渐变（目标圆半径为 0）效果图 如果我们给目标源一个大于 0 半径，您会看到另外一个效果：
清单 16. 径向渐变（目标圆半径非 0）1
2
| backgroud:
-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
|
这里我们给目标圆半径为 10，效果图如下：
图 10. 径向渐变（目标圆半径非 0） 您可以看到，会有一个半径为 10 的纯蓝的圆在最中间，这就是设置目标圆半径的效果。
现在我再改变一下，不再是同心圆了，内圆圆心向右 20px 偏移。
清单 17. 径向渐变（目标圆圆心偏移）1
2
| backgroud:
-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
|
这里我们给目标圆半径还是 10，但是圆心偏移为“70，50”（起始圆圆心为“50，50”）效果图如下：
图 11. 径向渐变（目标圆圆心偏移） 想必您明白原理了，我们可以做一个来自顶部的漫射光，类似于开了盏灯：
清单 18. 径向渐变（漫射光）1
| backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
|
其效果如下：
图 12. 径向渐变（漫射光） |
