实现文字渐变及光扩散效果

文字渐变及光扩散效果是前端常见的处理标题的手段，在此记录一下如何制作一个好看的文字渐变及光扩散文字效果。 先看下最终样式：

直接上核心代码：

    text-shadow: -1px 8px 16px rgba(47, 131, 209, 0.55);

    background: linear-gradient(0deg, #bde1ff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

原理：
text-shadow：添加一个光扩散阴影。
background：设置背景色渐变
-webkit-background-clip：将背景裁剪成文字。
-webkit-text-fill-color：将原文字变为透明。
其实质就是将渐变的背景裁剪成文字，将原文字隐藏。