[CSS] 字體漸變色

實現(xiàn)思路:
- 盒子設(shè)置為
inline-block,這樣盒子的大小就由文本量決定; - 盒子背景圖片使用
linear-gradient設(shè)置漸變色; - 設(shè)置
background-clip: text;使用文字區(qū)域截取背景; - 此時文字覆蓋在背景上方,只能看到原本純色的文字,設(shè)置文本顏色為透明:
color:transparent;,就能看到底部的漸變色的文字。
參考代碼:
.gradient-font{
font-size: 3.5rem;
text-transform: uppercase;
font-weight: 700;
display: inline-block;
background-image: linear-gradient(to right, #7ed56f, #28b485);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.2rem;
}
這種方法適用于 iconfont。

浙公網(wǎng)安備 33010602011771號