渐变色绘制

1.背景颜色渐变

html:

<a href="#">BUTTON</a>

css：

a {
    display: inline-block;
    font-size: 2em;
    border-radius: .3em;
    text-decoration: none;
    padding: 1em 2em;
    color: #fff;            
    background: linear-gradient( #79f269, #27ae60);/*背景颜色由浅绿到深绿上下过渡*/
}

左右颜色过渡：

css：

a {
    其他代码省略...       
    background: linear-gradient(to right, #79f269, #27ae60);/*背景颜色由浅绿到深绿左右过渡*/
}

解析：to后面的”right”代表渐变方向为向右。
左上到右下颜色过渡：

css：

a {
    其他代码省略...       
    background: linear-gradient(to right bottom, #79f269, #27ae60);/*背景颜色由浅绿到深绿左右过渡*/
}

径向渐变：

css：

a {
    其他代码省略...       
    background: radial-gradient(#79f269, #27ae60);/*背景颜色由浅绿到深绿径向过渡*/
}

解析：radial-gradient来生成径向渐变效果。
径向渐变在四方形中将显示为圆形，在其他形状中会被拉伸。如果希望径向渐变不受元素形状的影响，忠实的显示为圆形的渐变效果，则可以为其添加circle参数，如下：

a {
    其他代码省略...       
    background: radial-gradient(circle,#79f269, #27ae60);/*背景颜色由浅绿到深绿径向过渡*/
}

解析：如果要确保在大多数浏览器中的都能显示，则最好为其添加-webkit-、-moz-、-o-等兼容性前缀，如-moz-linear-gradient、-webkit-linear-gradient等。

2.文字渐变

html:

<a href="#">BUTTON</a>

css：

a {         
    font-size: 5em;
    background: linear-gradient(to right, #79f296,#27ae60);
    -webkit-background-clip: text;
    color: transparent;
}

解析：
-webkit-background-clip是背景裁剪属性，，裁剪的形状即文字区域，。然后再社会自文本的颜色为透明即可。