早上設計師妹子把設計稿交付過來，乍一看，上面的文字顏色漸變的，而且文字內容是動態的，也就是我們無法用圖片來代替。 作為一個有責任擔當的漢子，堅決不能說不行。

想起了CSS3 擅長做顏色漸變。所以趕緊查看了一下文檔，看看CSS3在對字體顏色漸變的實現上有沒有相關的方案。

我試了一下，強大的CSS3給我們提供相關的特性，能讓我們很方便地就實現字體顏色漸變，看下面這段代碼：

<h1 class="beauty-font" ?text="web前端教程">
? ?web前端教程
</h1>
<style>
? ?.beauty-font{
? ? ? ?display: inline-block;
? ? ? ?font-size: 80px;
? ? ? ?position: relative;
? ? ? ?color: red;
? ?}
? ?.beauty-font:after {
? ? ? ?content: attr(text);
? ? ? ?position: absolute;
? ? ? ?left: 0;
? ? ? ?z-index: 2;
? ? ? ?color:black;
? ? ? ?-webkit-mask: -webkit-gradient(
? ? ? ? ? ? ? ?linear,
? ? ? ? ? ? ? ?left top,
? ? ? ? ? ? ? ?right top,
? ? ? ? ? ? ? ?from(rgba(0,0,0,0.1)),
? ? ? ? ? ? ? ?to(rgba(0,0,0,0.8)));
? ?);
?}
</style>

?最后實現的效果如下：

（效果圖）

我們來詳細學一下字體漸變的實現，這里使用到的幾個核心特性有：content內容生成技術和漸變蒙版。

1.content內容生成技術

說起偽類?:after?大家一定不陌生，在日常開發中我們會經常用到它。我們經常會這樣使用：

.demo:after{
??? content: 'web前端教程';
}

但很少人知道，content屬性的值除了使用文本之外，還可以直接訪問讀取標簽的一些屬性值。使用的方法是：?attr()?，參見如下的代碼：

<div class="demo" text="web前端教程"></div>
.demo:after{
??? content: attr(text);
}

以上這種寫法同樣能給content屬性賦值：“web前端教程”。

2.漸變蒙版

漸變蒙版的實現主要是靠CSS3的?-webkit-mask?和?-webkit-gradient?配合著使用。

?-webkit-mask?主要是用來給一個元素添加一個蒙版。蒙版可以是透明的png圖片也可以是CSS3的漸變效果。在這里我們使用CSS3的?-webkit-gradient?來實現漸變效果。

大家上面看到的字體顏色漸變的效果就是用這兩個屬性來實現的。我把實現的效果拆分一下，大家就一目了然。如下圖：

大家看到最后的字體漸變效果，其實是兩個字體疊加出來的效果：原始元素+蒙版。在這里給大家講解了字體實現漸變的原理，有興趣的同學可以自己實現一個，CSS3的語法就不在這里展開了，具體的語法不熟悉的話可以翻查相關文檔，相信大家很容易就能上手。

不過這些CSS3屬性還沒有被所有瀏覽器所支持。但相信在不久的將來這些屬性都會被其他瀏覽器所支持，目前在還沒有支持這些屬性的瀏覽器中，我們只能采用優雅降級的方式處理。

熱門文章

原創教程

?原創教程：《ECMAScript 6 教程》

?附加習題：《ECMAScript 6 教程》測試題

?原創教程：《Vue2.0基礎教程》

?原創教程：《Vue2.0進階教程》

?附加習題：《Vue2.0基礎教程》測試題

趣味職場

?職場感悟：混口飯吃，談不上喜歡

?感到迷茫：我很努力，但依然很迷茫

?薪資待遇：那么點工資，能招到人嗎？

?培訓出身：我是一個培訓出身的程序員

?培訓費用：花1.8萬參加前端培訓，值嗎？

?培訓簡歷：簡歷包裝成1-2年經驗，咋辦？

?搞笑黑話：互聯網公司黑話，搞笑到爆

?職業自由：程序員職業自由的6個階段

?職場形象：在別人眼里，程序員是這樣的

總結

以上是生活随笔為你收集整理的设计师妹子问：字体颜色渐变，你能实现？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。