使用 background-clip 实现文字渐变
之前的文章CSS 文字渐变填坑技巧已经详细介绍如何实现文字渐变效果，本文简单回顾一下。
如上图所示，background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
使用background-clip: text;可以实现背景（背景图片或颜色）被裁减为文字的前景色，但是如果文字设置颜色，则无法生效，如左 1 所示，仍然显示文字颜色。
这时，可以将文字设置为透明，但考虑到兼容性问题，在部分浏览器如果 background-clip 无法生效且文字设置为透明，则会导致文字丢失。这时可以考虑用-webkit-text-fill-color，此属性的优先级大于color，可以指定文本的填充颜色，如左 2 所示。
最后一步便是将背景图片设置为线性渐变，可以使用 linear-gradient，如右 1 所示。
代码片段参考如下：
在H5开发过程中发现，文字渐变的兼容性不太好，在部份IOS机型上会有一条奇怪的线条，可以参考这篇文章，加一个1px的透明边框。
.gradient-text {
background: linear-gradient(227.67deg, #0288fb, #25c0fb, #37fffb, #9b62ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
border: 1px solid transparent;
background-repeat: no-repeat;
margin: -1px;
}
文字字体加粗渐变
可以使用font-weight属性实现文字字体加粗，但是想要实现特别粗的艺术字效果，需要使用-webkit-text-stroke，该属性可以指定文字的笔触宽度和笔触颜色。
这时我们配合使用background-clip和-webkit-text-fill-color属性，将文字的填充颜色设置为透明，这样就可以实现渐变字体描边。
如果希望文字描边也能够随着文字渐变，可以将-webkit-text-stroke属性的笔触颜色设置为透明，这样就可以实现文字字体加粗渐变。
代码片段参考如下：
文字渐变&描边渐变
突发奇想，如果想要实现文字渐变与字体描边渐变的四重叠加渐变效果，是否可以绘制两个层级，一个层级为文字渐变，另一个层级为字体描边渐变，然后将两个层级叠加在一起，这样就可以实现文字渐变&描边渐变的效果。
代码片段参考如下：
线性渐变字体添加阴影
稍微了解前端知识的朋友都知道文字添加阴影只需要使用text-shadow属性即可。然而实际效果却是阴影叠加在渐变文字上面，这是因为我们使用background-image实现文字渐变，而在层叠上下文中，背景和边框位于最底层，也就是说就算使用::after伪元素设置层级为负数来叠加文字阴影也是没有用的。
当多个元素位于同一个层叠上下文中时，它们的层级顺序由以下规则决定：
- 背景和边框：位于最底层。
- 负z-index值的元素。
- 块级元素：按照它们在HTML文档中的出现顺序堆叠。
- 内联元素：按照它们在HTML文档中的出现顺序堆叠。
- z-index为auto或0的元素。
- 正z-index值的元素：按照z-index值的大小从低到高堆叠。
这种情况下想要实现线性渐变字体添加阴影，就需要使用两个层叠层，层级高的文字为渐变文字，层级低的文字为阴影文字。
代码片段参考如下：
