[CSS-tricks]純CSS實(shí)現(xiàn)文本外描邊

一、透明text-stroke + 文本裁剪background

效果完美,還能整些花活,但某些情況可能無(wú)法使用。
單用text-stroke,會(huì)同時(shí)產(chǎn)生內(nèi)描邊,這在一些情況下是不希望發(fā)生的,特別是描邊比例過(guò)大時(shí)。
使用有透明text-stroke的文本裁剪背景,背景便填充在未被文本覆蓋的stroke中,從而消除內(nèi)描邊。
(從b站源碼里偷的x

二、多重模糊text-shadow

會(huì)出現(xiàn)邊緣模糊,但兼容性好。
使用無(wú)偏移、帶模糊半徑的擴(kuò)散text-shadow,從而產(chǎn)生外描邊,但是邊緣會(huì)產(chǎn)生模糊。

三、多向text-shadow

邊緣銳利,但可產(chǎn)生部分瑕疵。
使用多向偏移的無(wú)模糊text-shadow,實(shí)現(xiàn)銳利邊緣,但是在某些地方可能產(chǎn)生瑕疵,增加更多方向可能可以?xún)?yōu)化。