今年年初有一波新的設(shè)計趨勢席卷前端 UI 界勺阐，那就是「彩色漸變」。從 Ins 的 logo 開始矛双，淘寶、qq 等阿里系 app 也開始使用大面積的漸變色作為 ui 色彩方案蟆豫。
正所謂風(fēng)水輪流轉(zhuǎn)议忽，時尚永遠(yuǎn)是循環(huán)的，當(dāng)年的擬物到扁平十减，平了的不只是空間還有色彩栈幸，大家發(fā)現(xiàn)太平了玩不開，又設(shè)計出扁平陰影帮辟，現(xiàn)在 MD 又把物料和空間帶回設(shè)計界速址，自然色彩上也開始復(fù)蘇了，豐富的顏色又成了新的潮流由驹。
再看看硬件的發(fā)展芍锚，當(dāng)年由于渲染陰影、漸變是十分耗性能的設(shè)計蔓榄，設(shè)計開發(fā)都盡可能避免使用并炮，而如今硬件性能增強(qiáng)、硬件的限制也在變小甥郑，渲染流程不斷優(yōu)化逃魄、渲染速度加快、瀏覽器還可以開啟 GPU 加速澜搅，我們能做到的東西也越來越有意思伍俘。
不過當(dāng)年我們要實(shí)現(xiàn)漸變邪锌，也是以 background 屬性上設(shè)置漸變，能應(yīng)用的也僅僅是 dom 元素癌瘾，如果是文字或者是字體 icon 想要漸變觅丰，難道只能退化到土耕火種的切圖流了嗎？
當(dāng)然不用了 因?yàn)槲覀冇辛诵碌?CSS 屬性 background-clip
代碼展示
如果要設(shè)置文字的或者字體 icon 的漸變或圖片柳弄，只要兩個步驟：
- 設(shè)置文字顏色透明
color: transparent; - 設(shè)置背景剪切為文字
-webkit-background-clip: text;
屬性介紹
background-clip是 CSS Backgrounds and Borders Module Level 3 中的新屬性舶胀，該屬性的作用是在盒模型中設(shè)定背景的顯示區(qū)域。不過查閱了一下不支持 IE8 碧注，目前也要加前綴才可以使用嚣伐，不過屬性的功能還是十分強(qiáng)大的。
