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

text-shadow

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

<span class="demo1">Hello</span>

.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 text-shadow描边效果

-webkit-text-stroke

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

浏览器对 -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;
}

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

揭晓答案

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() 描边效果

.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。

文字外发光效果