css的渐变属性linear-gradient

CSS3的渐变属性linear-gradient
  linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
  创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

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;}

你可能感兴趣的:(css的渐变属性linear-gradient)