早上設計師妹子把設計稿交付過來，乍一看，上面的文字顏色漸變的，而且文字內容是動態的，也就是我們無法用圖片來代替。作為一個有責任擔當的漢子，堅決不能說不行。
想起了CSS3 擅長做顏色漸變。所以趕緊查看了一下文檔，看看CSS3在對字體顏色漸變的實現上有沒有相關的方案。
我試了一下，強大的CSS3給我們提供相關的特性，能讓我們很方便地就實現字體顏色漸變，看下面這段代碼：
<h1 class='beauty-font' text=< span >'web前端教程'>
web前端教程
</h1>
<style>< br> .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< span >,0,0.1)),
to(rgba(0,0,0,0.8)));
);
}
< /style>
最後實現的效果如下：
（效果圖）
我們來詳細學一下字體漸變的實現，這裡使用到的幾個核心特性有：content內容生成技術和漸變蒙版。
1.content內容生成技術
說起偽類 :after 大家一定不陌生，在日常開發中我們會經常用到它。我們經常會這樣使用：
.demo:after{
content: 'web前端教程 ';
}
但很少人知道，content屬性的值除了使用文本之外，還可以直接訪問讀取標籤的一些屬性值。使用的方法是： attr() ，參見如下的代碼：
<div class=< span >'demo' text='web前端教程'>< /span></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個階段
職場形象：在別人眼裡，程序員是這樣的
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Designer%20girl%20asked%20Font%20color%20gradient%20can%20you%20achieve%20it.html
支付宝扫一扫 
评论列表（196条）
测试