微信小程序——字体效果之凸版印刷效果

        在网页中，对文字进行艺术加工已经变得非常普遍了，比如凸版印刷效
果，当鼠标悬停时的模糊效果，浮雕（伪3D）效果，等等。要达成这些效
果，我们往往会用到一系列精心排列的文本投影，并且需要明白我们的眼睛
是如何工作的，因为这些手段往往建立在视错觉的基础上。一旦你掌握了其
中的窍门，就可以很容易地把这些效果画出来，不过用开发工具把它们写出
来可就没那么容易了。
        本篇攻略将专门讲解如何创建上述效果，你再也不需要一边挠头一边
问：“这个效果到底是怎么做出来的？”

一、凸版印刷效果

        让我们以下图中用到的两种颜色作为起点。图中文字的颜色是hsl(210, 13%, 30%)，而背景色是hsl(210, 13%, 60%)。

.text1 {
  background: hsl(210, 13%, 60%);
  color: hsl(210, 13%, 30%);
  padding: 30rpx;
}

        当我们在浅色背景上使用深色文字时（比如眼前的这个例子），在底部加上浅色投影通常效果最佳。到底要多浅，取决于你用的是什么颜色，以及你期望最终效果有多明显，因此需要反复尝试其透明度以达到满意效果。在这个例子中，我们最终敲定为80% 不透明度的白色；当然你也可以尝试其他数值：

.text1 {
  background: hsl(210, 13%, 60%);
  color: hsl(210, 13%, 30%);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);
  padding: 30rpx;
}

如果把文字和背景的颜色深度对调，样式看起来又会如何呢？

.text1 {
  background: hsl(210, 13%, 40%);
  color: hsl(210, 13%, 75%);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);
  padding: 30rpx;
}

        在深色底、浅色文字的情况下（参见上图），直接套用上述投影样式看起来会非常奇怪，会让文字显得模糊，在这种情况下，给文字顶部加深色投影是最佳方案。

.text1 {
  background: hsl(210, 13%, 40%);
  color: hsl(210, 13%, 75%);
  text-shadow: 0 -1px 1px black;
  padding: 30rpx;
}