text-shadow这个属性想必大家都不陌生，它可以给文字加上阴影，但是实际上，它能实现的效果可远不止这么简单，这篇文章我们用文字阴影来实现凸出文字、凹陷文字、文字描边以及赛博朋克风格的文字。

首先看一下text-shadow这个属性的兼容性：

可以看到，目前流行的浏览器版本上这个属性都可以兼容，甚至兼容了已经故去的IE10和11~

简单了解下text-shadow的用法，其实跟常用的box-shadow差别不大：

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

通过这几个值的设置，我们可以实现很多意想不到的效果：

凸出文字

在页面设计中，我们可能会需要实现一个浮雕的效果，也就是文字凸出于平面的效果：

实际上，在视觉中，在文字的底部加阴影，在文字顶部加高光，就可以在视觉上实现凸起的浮雕效果，而我们的text-shadow属性和box-shadow类似，也是可以同时写入多个阴影的：

text-shadow: -1px -1px white, 1px 1px black;

因此，我们通过在文字上方加入高光，下方加入阴影，即可实现凸出文字的浮雕效果：

.topleft {
  text-shadow: -1px -1px white, 1px 1px black;
}

.topright {
  text-shadow: 1px -1px white, -1px 1px black;
}

可以看到，通过高光阴影左右的控制，我们可以实现向左凸起和向右凸起。

凹陷文字

与文字凸出的浮雕效果类似，凹陷下去的雕刻效果只需要反过来即可，也就是在文字的顶部加阴影，在底部加高光，就可以实现凹陷的雕刻效果：

.bottomleft {
  text-shadow: -1px -1px black, 1px 1px white;
}

.bottomright {
  text-shadow: 1px -1px black, -1px 1px white;
}

同样，对高光阴影的左右方向设定不同，可以实现左右方向的雕刻效果。

文字描边

空心文字，在页面中是非常常见的元素，在PS中我们可以采用文字描边这样的功能进行实现，而使用CSS也可以这么做，只要用text-shadow属性在文字的四个方向都描上阴影就可以了：

.outline1 {
  text-shadow: 1px 1px black,
              -1px -1px black,
              1px -1px black, 
              -1px 1px black;
}
.outline2 {
  text-shadow: 1px 1px pink,
              -1px -1px pink,
              1px -1px pink, 
              -1px 1px pink;
}

赛博朋克风格文字

熟悉赛博朋克的朋友（估计大多数是上过赛博朋克2077的当）的朋友们应该都知道，赛博朋克有着自己独有的配色风格，有着夜晚霓虹灯的感觉，实际上赛博朋克的主要配色是洋红和青蓝，那么，利用text-shadow属性，给文字加上这两种带有半透明的颜色，我们就可以实现赛博朋克的霓虹效果：