文字渐变需配合color: transparent和background-clip: text生效，缺一即退化为纯色；为保可读性，须叠加双层text-shadow：第一层0 0 0 rgba(0,0,0,0.6)锁轮廓，第二层1px 1px 1px rgba(0,0,0,0.2)造纵深。
文字阴影与背景渐变搭配得当，既能保留视觉冲击力，又不会牺牲可读性。关键不在“加不加”，而在“怎么配、怎么叠、怎么控边界”。
先确保渐变文字本身能被看清
渐变文字必须配合 color: transparent 和 background-clip: text 才生效，漏掉任一就会退化成纯色块。但透明填充会让文字在复杂背景上极易“消失”，所以必须叠加阴影来锚定轮廓：
- 写法必须完整：设置
background-image: linear-gradient(...)，再加-webkit-background-clip: text和background-clip: text - 务必声明
color: transparent（不能只靠-webkit-text-fill-color: transparent，部分浏览器会忽略） - 渐变角度建议用 45deg 或 90deg，避免水平/垂直单向渐变导致局部过亮或过暗
阴影要“压实轮廓”，不是简单加一层模糊
对渐变文字，普通 2px 2px 4px rgba(0,0,0,0.3) 往往压不住边缘，尤其在浅色渐变段。推荐双层组合：
-
第一层（轮廓钉）：
0 0 0 rgba(0,0,0,0.6)—— 零偏移、零模糊，把文字边缘“锁住”，防止渐变色虚边 -
第二层（纵深感）：
1px 1px 1px rgba(0,0,0,0.2)—— 轻微右下偏移+低模糊，制造自然落差 - 两层之间用英文逗号分隔，缺逗号=只剩第一层；三层以上易糊且难调试
避开常见失效陷阱
明明写了 text-shadow 却看不到影子？大概率是以下原因：
- 父容器设置了
overflow: hidden或clip-path，把阴影裁掉了——临时加outline: 1px solid red查看实际渲染区域 - 用了
transform: scale(0.95)等缩放，导致阴影被压缩变形，建议改用font-size调整大小 - 深色渐变配深色阴影（如
#222），对比度不足——阴影颜色统一用rgba(0,0,0,0.5)或rgba(255,255,255,0.7)，根据背景明暗动态切换
小字号或移动端需特别处理
14px 以下文字+渐变+阴影，iOS Safari 容易出现毛边或锯齿：
- 把
blur-radius降到0或0.5px，优先用纯偏移描边（例如1px 1px 0 #000） - 禁用
font-style: italic，斜体+小字号+模糊阴影是毛边三重奏 - 必要时加
-webkit-font-smoothing: antialiased强制平滑，但仅限 WebKit 内核 - 终极方案：换字体，system-ui、Segoe UI 或 Inter 比细衬线体更抗锯齿
