微信小程序——字体效果之凸起效果

        凸起效果的主要思路就是使用一长串累加的投影，不设模糊并以1px（这边用rpx） 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果。

.text2 {
  padding: 30rpx;
  font-size: 70rpx;
}

.text2 {
  background: #58a;
  color: white;
  text-shadow: 0 2rpx hsl(0, 0%, 85%),
                 0 4rpx hsl(0, 0%, 80%),
                 0 6rpx hsl(0, 0%, 75%),
                 0 8rpx hsl(0, 0%, 70%),
                 0 10rpx hsl(0, 0%, 65%);
}

在上图中可以看到，效果已经出来了，但看起来还不够真实。我们距离最终效果只差最后一步了，那就是在底部加一层投影：

.text2 {
  background: #58a;
  color: white;
  text-shadow: 0 2rpx hsl(0, 0%, 85%),
                 0 4rpx hsl(0, 0%, 80%),
                 0 6rpx hsl(0, 0%, 75%),
                 0 8rpx hsl(0, 0%, 70%),
                 0 10rpx hsl(0, 0%, 65%),
                 0 12rpx 15rpx black;
}