文字描边效果 | wjs-css-effects

镂空文字

基础描边

悬停填充

hover 填充动画

渐变描边

渐变描边

发光描边

发光效果

关键点

文字描边通过 -webkit-text-stroke 给文字添加轮廓线，可做镂空文字效果
包含 -webkit-text-stroke-width（描边宽度）和 -webkit-text-stroke-color（描边颜色）
配合 color: transparent 可实现只有轮廓的镂空文字
这是 WebKit 私有属性，主要在 Chrome、Safari 等 WebKit 内核浏览器中使用
描边宽度过粗时文字笔画交叉处可能有瑕疵，适合大字号标题使用

效果说明

利用 -webkit-text-stroke 属性实现的镂空文字描边效果。配合 hover 动画、渐变、发光等技巧，可以制作出丰富的标题文字效果。这里展示 4 种变体：基础描边、hover 填充、渐变描边、发光描边。