经过思考梳理了以下三个方案，方案1无疑是最好的，但既然有了方案2和方案3的设想，便姑且也尝试写出来试试效果。

方案一 -webkit-text-stroke,color 或 -webkit-text-fill-color

1）用 -webkit-text-stroke（文字描边） 设置文字描边的粗细和颜色；

2）用 color 将文字颜色设置为透明，或者用 -webkit-text-fill-color 将文字填充为透明色。

方案二 text-shadow,mix-blend-mode

1）用 text-shadow 给文字添加阴影，但是因为它没有提供属性来修改阴影的延伸半径（类似box-shadow的第四个参数），所以描边效果不够锋锐；

2）将字体颜色设置为白色，之所以不随方案一设置为透明色，是因为那么做的话，显示出的是文字下方的文字阴影，而非元素下方的东西；

3）用 mix-blend-mode 将文字颜色与下方背景图像进行混合，上一步文字设置的是白色，那么这里混合方式就选darken，这样经过混合计算后显示的就是下方的背景。

方案三 :after,transform

1）首先将文本的每个文字都放到一个单独元素中，并用该元素的:after伪元素进行一定的缩放，然后放置到原文字的上方，遮盖住原文字的身体，只漏出所有笔画的边缘部分；

2）:after伪元素的颜色要与文本下方的背景保持一致。