CSS中background-clip属性

例如我们这个模板中的文字，你细看的时候会发现我们的文字有些是渐变的。那么我们应该如何实现这个效果呢？

如图所示，这个原理其实不是将文本设置渐变色，而是将背景设置为渐变色。

.text{
color:transparent;//声明字体颜色为透明色
background-clip:text;//使文字实现这个效果的主要部分;
-webkit-background-clip:text;//使除了chrome和safari浏览器内核的浏览器识别
background: linear-gradient(to right,#8183ff,#58b3f5);//背景渐变色设置
}

<span class="text">这是渐变色文字</span>

这样我们就简单实现了文字渐变的效果，如图所示

为了能让我们看的更清楚，我们给他一个加粗的效果，font-weight:bold;