字體漸變

主要用到css3中的gradient這個屬性

background: linear-gradient(direction, color-stop1, color-stop2, ...);  

但這是用用背景，如果要讓字體也有漸變效果需要加寫修飾

span{
    font-size: 20px;
    background-image: -webkit-linear-gradient(right,red,blue);
    background-image: linear-gradient(to right,red,blue);
    -webkit-background-clip:text;
    color: transparent;
}

background-clip規定背景的繪制區域

所以在上面-webkit-background-clip:text就是被剪裁到字體，然后給字體設置為透明。
需要注意的是字體需要是行內元素，如果是塊元素就要給塊元素加上實際字體所占的寬度。