CSS（二）文字渐变

   在项目中，UI经常会设计带颜色渐变的设计图，通常设计师会切图，以图片的形式加载，但这样会消耗浏览器资源，且如果需要动态改变文字，也不方便，因此就需要利用CSS3实现文字的渐变了。

1、 background-clip+text-fill-color：

.gradient-text-one{  

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 

    -webkit-background-clip:text; 

    -webkit-text-fill-color:transparent; 

}

2、mask-image

.gradient-text-two{

   color:red;

}

.gradient-text-two[data-content]::after{

    content:attr(data-content);

    display: block;

    position:absolute;

    color:yellow;

    left:0;

    top:0;

    z-index:2;

    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

3、 linearGradient、fill

.gradient-text-three{

    fill:url(#SVGID_1_);

    font-size:40px;

    font-weight:bolder;

}

<svg viewBoxs="0 0 500 300" class="svgBox">

    <defs>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">

            <stop  offset="0" style="stop-color:yellow"/>

            <stop  offset="0.5" style="stop-color:#fd8403"/>

            <stop  offset="1" style="stop-color:red"/>

        </linearGradient>

    </defs>

    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>

</svg>

参考： http://www.php.cn/css-tutorial-408797.html