如何使用CSS实现图示中的文字描边与阴影效果？

问题分析 #

你当前的text-shadow仅设置了4个方向的零散偏移，无法形成环绕文字的不规则毛边效果，因此达不到图示的手写风格描边。

解决方案 #

要实现这种不规则、类似手写毛边的白色描边，可以通过增加多组不同方向、不同偏移量的text-shadow模拟，同时配合-webkit-text-stroke做基础描边增强效果。以下是调整后的可行代码：

CSS代码 #

body {
  font-size: 4rem;
  font-weight: bold;
  color: #030303;
  /* 基础细描边打底 */
  -webkit-text-stroke: 1px #fff;
  /* 多组阴影模拟毛边效果 */
  text-shadow: 
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    2px -1px 0 #fff,
    -1px 2px 0 #fff,
    3px 2px 0 #fff,
    -2px 3px 0 #fff,
    1px -2px 0 #fff,
    -3px -1px 0 #fff,
    2px 3px 0 #fff,
    -3px 2px 0 #fff;
  background-color: lightgray;
}

HTML代码 #

Lorem Ipsum

效果说明 #

• -webkit-text-stroke提供基础规整描边，保证文字边缘有一层白色底色
• 多组不同偏移量的text-shadow从各个方向覆盖文字，模拟手写风格的不规则毛边。你可以根据需求随机调整阴影的偏移值、颜色深浅，比如加入4px -3px 0 #fff、-4px 1px 0 #fff这类组合，让边缘更贴近图示的“杂乱自然”感。

内容的提问来源于stack exchange，提问作者kuldeep