还有一种非常绕的方法，利用混合模式加上滤镜，也能生成镂空文字。
p { position: relative; color: #fff; &::after { content: 'Magic Text'; position: absolute; left: 0; top: 0; color: #fff; mix-blend-mode: difference; filter: blur(1px); } }这里利用 filter: blur(1px) 生成了一个比原字体稍微大一点点的字体覆盖在原字体之上，再利用 mix-blend-mode: difference 消除掉了同色的部分，只留下了利用模糊滤镜多出来的那一部分。
mix-blend-mode: difference: 差值模式（Difference），作用是查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不产生变化。
示意动图如下：
CodePen Demo -- Hollow TEXT EFFECT
利用混合模式，生成渐变色镂空文字好，回到上面的 -webkit-text-stroke，拿到了镂空文字后，我们还可以利用混合模式 mix-blend-mode: multiply 生成渐变色的文字。
mix-blend-mode: multiply: 正片叠底（multiply），将两个颜色的像素值相乘，然后除以255得到的结果就是最终色的像素值。通常执行正片叠底模式后的颜色比原来两种颜色都深。任何颜色和黑色正片叠底得到的仍然是黑色，任何颜色和白色执行正片叠底则保持原来的颜色不变，而与其他颜色执行此模式会产生暗室中以此种颜色照明的效果。
p { position: relative; -webkit-text-stroke: 3px #9a9acc; &::before{ content: ' '; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00); mix-blend-mode: multiply; } }在这里，mix-blend-mode: multiply 发挥的作用和 mask 非常的类似，我们其实是生成了一幅渐变图案，但是只有在文字轮廓内，渐变颜色才会显现。
当然，上述效果和整体的黑色底色也是有关系的。
示意图如下：
CodePen Demo -- Hollow TEXT EFFECT
利用混合模式，生成光影效果文字OK，在上述的基础上，我们可以继续叠加混合模式，这次我们利用剩余的一个 ::after 伪类，再添加一个 mix-blend-mode: color-dodge 混合模式，给文字加上最后的点缀，实现美妙的光影效果。
mix-blend-mode: color-dodge: 颜色减淡模式（Color Dodge），查看每个通道的颜色信息，通过降低“对比度”使底色的颜色变亮来反映绘图色，和黑色混合没变化。。
核心的伪代码：
p { position: relative; -webkit-text-stroke: 3px #7272a5; &::before { content: ' '; background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00); mix-blend-mode: multiply; } &::after { content: ""; position: absolute; background: radial-gradient(circle, #fff, #000 50%); background-size: 25% 25%; mix-blend-mode: color-dodge; animation: mix 8s linear infinite; } } @keyframes mix { to { transform: translate(50%, 50%); } }看看效果：
这里就要感叹 mix-blend-mode: color-dodge 的神奇了，去掉这个混合模式，其实是这样的：
CodePen -- Hollow TEXT EFFECT