css3渐变和阴影

蒙版/渐变

    ①  -webkit-gradient(, , , from(颜色1) ,to(颜色2))

渐变类型type:linear（线性渐变）或者radial（径向渐变）

渐变起点;x1,y1(可以用left，top等表示)

渐变终点:x2,y2(可以用left，bottom等表示)

background: -webkit- gradient(linear, left top, left bottom, #bccfe3, #d2dded); 

    ②最新式的写法:

线性渐变：

       -webkit-linear-gradient(渐变起点,颜色1,颜色2);

       -webkit-linear-gradient(top,#ace,#f96);

径向渐变：

        -webkit-radial-gradient(渐变起点,颜色1,颜色2);

       -webkit-radial-gradient(top,#ace,#f96);

  ③彩虹式渐变(含百分百)

 background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace); 

 background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), color-stop(0.95, #f96), to(#ace)); 

  ④放射性渐变radial

    background: -moz-radial-gradient(#ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

  background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
 background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

 
 background: -moz-radial-gradient(bottom left,circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

   ⑤制作背景图

 ⑥线性渐变在IE的应用：

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。

GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

⑦Firefox支持两种类型的CSS渐变

     线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。