html:
<p class="p-title p-clip">溫馨提示</p>
css:
.p-title {font-size: 32px; color: #fbd076; }
@supports (-webkit-background-clip: text) {
? .p-clip {
? ? background-image: -webkit-linear-gradient(#ffa719, #f3efd4);
? ? background-image: linear-gradient(#ffa719, #f3efd4);
? ? -webkit-background-clip: text;
? ? background-clip: text;
? ? -webkit-text-fill-color: transparent;
? ? color: transparent; }
}
生成示例：
不兼容漸變文字
兼容漸變文字
@supports (-webkit-background-clip: text) 寫法寂汇，不僅可以在低版本瀏覽器顯示正常顏色，而且在兼容瀏覽器可以正常顯示漸變文字。
