CSS3的漸變屬性linear-gradient
??linear-gradient() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。
??創(chuàng)建一個線性漸變，需要指定兩種顏色，還可以實(shí)現(xiàn)不同方向（指定為一個角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。

linear-gradient(direction, color-stop1, color-stop2, ...)

direction: 用角度值指定漸變的方向（或角度）。
color-stop1, color-stop2,...: 用于指定漸變的起止顏色。

??一般情況下，css3背景漸變考慮兼容性的寫法如下：

.left-name{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

??但是IE6-9不兼容linear-gradient，需要使用IE下的私有屬性filter，所以CSS代碼如下：

.left-name{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .left-name{filter:none;}