css3+svg（兼容ie低版本）實現文字漸變的方法

一、css3實現文字漸變（不兼容ie低版本）

p{
    font-size: 26px;
    background: linear-gradient(to right,#63bd78,#36a28e,#1e8fab,#047bcb);
    -webkit-background-clip: text;
    color: transparent;
}

加上底部漸變橫線代碼如下：

p{
     font-size: 26px;
    background: linear-gradient(to right,#63bd78,#36a28e,#1e8fab,#047bcb);
    -webkit-background-clip: text;
    color: transparent;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right,#63bd78,#36a28e,#1e8fab,#047bcb) 30 30;
}

二、svg實現文字漸變效果（兼容ie低版本）

代碼如下：

<h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:81%;height:43px;">
        <defs>
		    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
			    <stop offset="0%" style="stop-color:#4FB570;stop-opacity:1" />
				<stop offset="25%" style="stop-color:#3DA786;stop-opacity:1" />
				<stop offset="50%" style="stop-color:#2A989D;stop-opacity:1" />
			    <stop offset="75%" style="stop-color:#1B8DAF;stop-opacity:1" />
				<stop offset="100%" style="stop-color:#2C88CC;stop-opacity:1" />
			</linearGradient>
		</defs>
	    <text x="0" y="40" fill="url(#grad1)" style="font-size:26px">資源共享</text>
	</svg>
</h3>

截圖如下：

帶有底部漸變需添加以下代碼}

h3 {
    padding: 10px 0;
    width: 130px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right,#63bd78,#36a28e,#1e8fab,#047bcb) 30 30;
}

如有更好的辦法，歡迎大家交流指點