CSS中的多描边文本效果尝试2026年4月11日有人过去常看到复古的多描边文本效果尝试用CSS的 text - stroke 属性复刻却效果不佳。因为 text - stroke 只能接受单一值堆叠元素的办法也不管用。去年一个晚上此人读《Graphic Japan : from woodblock and zen to manga and kawaii》《日本平面设计从木刻、禅意到漫画与可爱风》时又看到这种文本效果便再次尝试。意外接近的效果不断堆叠多个元素并偶然为每一层设置不同的 text - stroke - width这次效果更接近了。给出了相应的CSS代码--c: #cc0d55;--n: i(-1);grid: 36x1 / 240px;content: ✱;position: absolute;inset: 0;font: 100px/0 sans - serif;color: var(--c);z - index: I(-i);-webkit - text - stroke - color: pn(--c, #f4e1e8);-webkit - text - stroke - width: $em(.08n.02(1 - (-1)^n));原理剖析对于不同的 text - stroke - width 值浏览器会自动绘制字符的轮廓。描边宽度越大轮廓越粗且保持字符原始形状。给出相关CSS代码grid: 7x1/ 360px auto noclip;content: ✱;font: 50px/0 sans - serif;color: transparent;-webkit - text - stroke - color: #cc0d55;-webkit - text - stroke - width: i(*1.8px);下一步是使用不同颜色并按顺序排列也给出了对应CSS代码grid: 12x1/ 100px ß #f4e1e8;content: ✱;position: absolute;inset: 0;z - index: I(-i);font: 50px/0 sans - serif;color: transparent;-webkit - text - stroke - color: pn(#f4e1e8, #cc0d55);-webkit - text - stroke - width: i(*3px);有趣的是不同浏览器绘制字符轮廓的方式不同Firefox的渲染效果比Chrome和Safari更平滑。还有个有趣现象当有更多文本内联排列时字符形状会合并给出代码/* ... */ content: 秋收冬藏;尝试不同字体最终效果很大程度取决于选择的字体。为快速尝试不同字体添加了 google - font 函数加快字体加载速度并给出了不同字体的CSS代码示例--c: #cc0d55,#fff;grid: 34x1 / 320px;content: b;font: 150px/0 google - font(Matemasie);place: center;z - index: I(-i);color: pn(--c);-webkit - text - stroke - color: pn(--c);-webkit - text - stroke - width: i(-1, ease, *12px);font - family: google - font(Matemasie);content: b;--c: #cc0d55,#fff;grid: 30x1 / 320px;:after {content: Love;position: absolute;}font: 80px/0 google - font(Pacifico);place: center;z - index: I(-i);color: pn(--c);-webkit - text - stroke - color: pn(--c);-webkit - text - stroke - width: i(ease, -1, *15px);font - family: google - font(Tangerine);content: Love;--c: #fff9e0,#f1c550,#ff6600,#ce2525;--c: #cc0d55,#fff;grid: 30x1 / 320px 2 ~0 -10%;:after {content: ;position: absolute;}place: 50% 50%;font: 120px/0 google - font(Cherry Bomb One);z - index: I(-i);color: pn(--c);-webkit - text - stroke - color: pn(--c);-webkit - text - stroke - width: i(ease, -1, *12px);font - family: google - font(Cherry Bomb One);content: ;性能问题与更多示例这种效果的性能和CSS滤镜一样差字体变大时会有闪烁。对于实验或用css - doodle生成图像还可接受但不适合生产环境。这里还有两个通过css - doodle生成的示例用于尝试不同颜色和字符仅供娱乐。