經(jīng)過(guò)思考梳理了以下三個(gè)方案，方案1無(wú)疑是最好的，但既然有了方案2和方案3的設(shè)想，便姑且也嘗試寫(xiě)出來(lái)試試效果。

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

1）用 -webkit-text-stroke（文字描邊） 設(shè)置文字描邊的粗細(xì)和顏色；

2）用 color 將文字顏色設(shè)置為透明，或者用 -webkit-text-fill-color 將文字填充為透明色。

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

1）用 text-shadow 給文字添加陰影，但是因?yàn)樗鼪](méi)有提供屬性來(lái)修改陰影的延伸半徑（類(lèi)似box-shadow的第四個(gè)參數(shù)），所以描邊效果不夠鋒銳；

2）將字體顏色設(shè)置為白色，之所以不隨方案一設(shè)置為透明色，是因?yàn)槟敲醋龅脑?huà)，顯示出的是文字下方的文字陰影，而非元素下方的東西；

3）用 mix-blend-mode 將文字顏色與下方背景圖像進(jìn)行混合，上一步文字設(shè)置的是白色，那么這里混合方式就選darken，這樣經(jīng)過(guò)混合計(jì)算后顯示的就是下方的背景。

方案三 :after,transform

1）首先將文本的每個(gè)文字都放到一個(gè)單獨(dú)元素中，并用該元素的:after偽元素進(jìn)行一定的縮放，然后放置到原文字的上方，遮蓋住原文字的身體，只漏出所有筆畫(huà)的邊緣部分；

2）:after偽元素的顏色要與文本下方的背景保持一致。