一、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"

本文介绍了如何使用CSS3和SVG两种方法来实现文字渐变效果,其中CSS3方案不支持低版本IE,而SVG方案则能实现兼容。文章通过代码示例详细阐述了SVG在文字渐变中的应用,提供了兼容IE的解决方案,并鼓励读者分享更多方法进行讨论。
最低0.47元/天 解锁文章
3612

被折叠的 条评论
为什么被折叠?



