CSS3j背景漸變，字體顏色漸變，以及兼容IE寫法

一、背景漸變

#grad {

　　background: linear-gradient(red, blue);

 }

漸變路徑默認是從上到下，也可以指定路徑：

//從左到右

#grad {

background: linear-gradient(to right, red , blue);

}

//從左上角到右下角

#grad {

　　 background: linear-gradient(to bottom right, red , blue);

 }

　　

　　注：低版本IE不支持css3的漸變，可以通過濾鏡來實現漸變效果

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
參數：startColorStr起始顏色 endColorStr結束顏色 gradientType為0時代表垂直，為1時代表水平

　　

 

二、文字漸變

　　HTML代碼：

<h2 class="text-gradient">文字漸變</h2>

第一種方法：

span {
　　background: linear-gradient(to right, red, blue);
　　-webkit-background-clip: text;

　　background-clip: text;
　　color: transparent;
}

  第二種方法：

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微軟雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};