渐变色绘制

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是背景裁剪属性，，裁剪的形状即文字区域，。然后再社会自文本的颜色为透明即可。