CSS制作渐变描边等文字特效

前端开发工作中遇到的文本有很多特效，比如渐变色、描边、带渐变色的描边、文字外发光、投影等等。现在总结一些经验，方便以后使用。
Tips: 以下方法并没有考虑兼容性，仅在chrome下测试。

---

text-shadow

利用 text-shadow实现文字描边，仔细一想是不是很酷？我们给文字加一圈不模糊的阴影，不就是在给文字描边吗？具体可以这样操作：

Hello

.demo1 {
  font-size: 100px;
  font-weight: 800;
  color: #232d2d;
  text-transform: uppercase;
  text-shadow: 1px 0 0 #eef85b, 0 1px 0 #eef85b, -1px 0 0 #eef85b, 0 -1px 0 #eef85b;
}

一个可爱的描边效果诞生了：

text-shadow描边效果

这还没完，如果我们想描得粗一点呢？比如3px的描边：

3px text-shadow描边效果

不对劲欸，描出来的边不可导，哦不，不连续。不过换个角度，我们也创造了一种神奇的效果，类似像素风。看来，text-shadow 比较适合1px 这种比较难用肉眼去分辨文字拐角是否连续的描边效果。

-webkit-text-stroke

说到描边，可以使用已有的CSS描边属性，CSS标准里还没有，只有带浏览器前缀的属性：-webkit-text-stroke。如果你需要考虑浏览器的兼容性，就不要考虑用这个属性了，IE浏览器是不支持的。

浏览器对 -webkit-text-stroke 的兼容性

当我们使用了这个属性，可能会发现文本变瘦了，好像描边挤到了文本内容。为了研究-webkit-text-stroke的使用原理，特意给文本加上了半透明效果的描边，如下图所示。

-webkit-text-stroke 简单使用

CSS代码如下：

.demo2 {
  font-size: 200px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0.5);
}

描边的时候，浏览器是会沿着文本的外沿，以外沿边界为中心，左右对称的渲染描边效果。也就是说，如果描边的宽度是2px，那么文本外被描到1px，文本内被描到1px。所以文本的描边会占用文本本身，也就会让文本看起来变瘦。这种描边有时候并不是我们想要的效果，如何在文本外进行描边而不占用文本本身呢？这个时候就可以使用增强版的-webkit-text-stroke描边技术。
我们需要把它的颜色设置成透明。如果仅进行如此操作，文本没有任何变化，还需要借助-webkit-background-clip属性。这个属性的取值有很多，这里用到了text。-webkit-background-clip:text; 这样使用可以让背景色的显示区域剪裁成前景中文本的形状。当文本是透明的时候，就能显示出背景色了。干巴巴地说，还是无法显露出这种方法的精髓，现在上个例子：
先给文本设置一个透明色描边：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0);
}

设置成透明色描边

再给文本区域设置渐变背景色：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%);
}

文本区域设置渐变背景色

有点意思了，然后把背景色的显示区域剪裁成前景中文本的形状：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0); 
  background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%); 
  -webkit-background-clip: text;
}

背景色的显示区域剪裁成前景中文本的形状

哦了，无形中制作出了渐变色描边效果，描边宽度 8px。而且也能意识到，描边是文本的一部分。把渐变色背景改成纯色或者图片，大家应该能想象到效果吧。
如果我们再多加一个CSS样式：-webkit-text-fill-color: transparent;，又会变成什么效果呢？答案马上揭晓：

揭晓答案

文字太粗了？没事儿，把描边样式删掉就可以变成正常宽度的这种渐变文字效果了。无形中又增加了奇怪的技能。

filter:drop-shadow()

This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

非常有用的一个属性，比如上面我们提到的text-shadow实现 3px 描边会比较尴尬，但是用这个属性就再也不用担心了：

3px drop-shadow() 描边效果

CSS代码如下：

.demo3 {
  font-size: 100px;
  font-weight: 800;
  color: #232d2d;
  text-transform: uppercase;
  filter: drop-shadow(3px 0 0 #eef85b) drop-shadow(-3px 0 0 #eef85b)
    drop-shadow(0 3px 0 #eef85b) drop-shadow(0 -3px 0 #eef85b);
}

drop-shadow()用来实现外发光也超nice，当然也可以使用text-shadow。

文字外发光效果