渐变

      有了渐变再也不用去切1px的图再重复了..

      -webkit- 是浏览器前缀, 表示特定浏览器对一个属性还在实验阶段, 在这里顺便写下各个浏览器的前缀:

      chrome/ safari     -webkit-

      firefox                 -moz-

      IE                        -ms-

      opera                  -o-

      为了各个浏览器能够识别, 我们要把每种前缀都要写一遍... 对了, 只有自己浏览器能识别带自己前缀的属性.

      background-image: -webkit-linear-gradient(top, red, blue); 

  要注意渐变是 background-image 而不是 background-color!

 --------------------------------------------------------------------------------------------------

      前缀有了, linear 表示线性, gradient 表示渐变.

      第一个参数表示 从哪里开始(默认是 top), 有:top/ right/ bottom/ left 四个值(linear 时不能写 center, 我还好死不死的试试, 然并卵0..0), 但可以组合使用: background-image: -webkit-linear-gradient(top left, red, blue); 表示从左上角开始. 

      还可以用度数表示,以下是 0 deg:  

  background-image: -webkit-linear-gradient(0deg, red, blue); 

      以下是90deg:

  background-image: -webkit-linear-gradient(90deg, red, blue); 可以理解为逆时针旋转90deg(谁会关心这个..).

  --------------------------------------------------------------------------------------------------

     第二个和第三个参数并非只可以有这俩, 看你想让他渐变多少种颜色, 比如你可以这样玩:

  咳咳, 能看出重复多少遍的加我Q: 758325009, 给认真的人一个大红包..

颜色参数不仅仅只写颜色, 还可以设置从哪里个位置开始渐变这个颜色:

background-image: -webkit-linear-gradient(top left, red, blue 25%, yellow 90%); 这个百分数是相对于渐变的方向那个边, 表示到这个位置时就已经完全变为该颜色, 说的麻烦, 看下图:

 -------------------------------------------------------------------------------------------------- 

除了可以一个方向上变化, 还可以 radial 辐射状渐变.

  background-image: -webkit-radial-gradient(center center , red, blue); 此时第一个参数就可写 center center.

 --------------------------------------------------------------------------------------------------

      特别的, 当是 radial 渐变时, 可以用 0px 0px 和 30% 30%, 这两个数值分别是辐射中心相对于 X 轴和 Y 轴的偏移量, 如下:

  background-image: -webkit-radial-gradient(0px 0px, red, blue); 

 --------------------------------------------------------------------------------------------------

  background-image: -webkit-radial-gradient(25% 25%, red, blue);

 --------------------------------------------------------------------------------------------------

　　以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.

CSS3-渐变这个属性