每日一记 - 但并不日更
今年年初有一波新的设计趋势席卷前端 UI 界，那就是「彩色渐变」。从 Ins 的 logo 开始，淘宝、qq 等阿里系 app 也开始使用大面积的渐变色作为 ui 色彩方案。
Instagram 的彩色 logo
淘宝的 UI 界面
正所谓风水轮流转，时尚永远是循环的，当年的拟物到扁平，平了的不只是空间还有色彩，大家发现太平了玩不开，又设计出扁平阴影，现在 MD 又把物料和空间带回设计界，自然色彩上也开始复苏了，丰富的颜色又成了新的潮流。
再看看硬件的发展，当年由于渲染阴影、渐变是十分耗性能的设计，设计开发都尽可能避免使用，而如今硬件性能增强、硬件的限制也在变小，渲染流程不断优化、渲染速度加快、浏览器还可以开启 GPU 加速，我们能做到的东西也越来越有意思。
不过当年我们要实现渐变，也是以 background 属性上设置渐变，能应用的也仅仅是 dom 元素，如果是文字或者是字体 icon 想要渐变，难道只能退化到土耕火种的切图流了吗？
当然不用了 因为我们有了新的 CSS 属性 background-clip
普通的渐变按钮
支持文字设置渐变或图片
代码展示
如果要设置文字的或者字体 icon 的渐变或图片，只要两个步骤：
- 设置文字颜色透明
color: transparent; - 设置背景剪切为文字
-webkit-background-clip: text;
CSS 代码
属性介绍
background-clip是 CSS Backgrounds and Borders Module Level 3 中的新属性，该属性的作用是在盒模型中设定背景的显示区域。不过查阅了一下不支持 IE8 ，目前也要加前缀才可以使用，不过属性的功能还是十分强大的。
属性和值
