概念：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。线性渐变：

语法：

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

说明：direction：默认为to bottom，即从上向下的渐变； 还可以设置为度数。自上向右 （0度 —— 90度的变化） -- 旧的标准是相反 自右而上 （ 90—— 0）stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

径向渐变：从一个点想四周的渐变

语法一：

background-image: radial-gradient(position, shape, size, start-color, …, last-color);

注：shape和size 不能一起使用；

语法二：

background-image: radial-gradient(shape size at position, start-color, …, last-color);

注:shape size at position 这几个属性之间不用逗号隔开，可以一起显示。

position：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

浏览器前缀：

-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏器（如Firefox）专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀