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

如有更好的办法，欢迎大家交流指点