如何使用CSS为文本添加带描边的阴影效果？

你之前仅用text-shadow无法实现图中效果，是因为图里的文本同时包含实体描边和偏移阴影，单纯的单条阴影只能实现偏移效果，没法做出清晰的描边。可以结合CSS文字描边属性和text-shadow来完美复刻：

完整实现代码 #

CSS 代码 #

body {
  background-color: black;
}

.stroke-shadow {
  color: white;
  /* 添加文字描边：兼容webkit内核和标准语法 */
  -webkit-text-stroke: 2px #FF29ED;
  text-stroke: 2px #FF29ED;
  /* 保留你需要的偏移阴影 */
  text-shadow: -7px -7px 0 #FF29ED;
}

p {
  font-weight: 700;
  font-size: 200px;
  font-family: sans-serif; /* 可选，确保字体风格匹配原图 */
}

HTML 代码 #

<p class="stroke-shadow">CREATE</p>

核心要点 #

• 文字描边：text-stroke（含webkit前缀）是专门用于给文字添加实体描边的属性，比用多层text-shadow模拟描边（需要上下左右四个方向阴影叠加）更精准，不会出现模糊或错位问题。
• 偏移阴影：保留你原有的text-shadow配置，实现左上方的粉色偏移效果，和描边颜色统一，完美匹配图中样式。
• 若需要调整描边粗细，直接修改text-stroke的像素值即可；阴影的偏移量、颜色也可按需调整。

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