css實現文字漸變併兼容IE瀏覽器
阿新 • • 發佈:2021-02-03
css實現文字漸變併兼容IE瀏覽器
css文字漸變寫法
color: #fff;
background: linear-gradient(to bottom, #fff5b9, #f3d380);
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
在IE瀏覽器中不支援這種寫法,可以使用svg在IE瀏覽器中實現文字漸變效果
<svg width="81" height="22">
<defs>
< linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff5b9; stop-opacity:1" />
<stop offset="100%" style="stop-color:#f3d380; stop-opacity:1" />
</linearGradient>
</defs>
<text x="0" y="16" fill="url(#grad)" style="font-size:16px;font-weight: bold;">測試文字</text>
</svg>
x1-x2:是x軸變換
y1-y2:是y軸變換
像demo中的就是從上往下漸變
stop-color:是變化的顏色
親測有效!!!!!