text-shadow是唯一正解，参数顺序必须为水平偏移、垂直偏移、模糊半径、颜色，缺一不可；前两个值必填（0可不带单位），后两者位置不可调换，多层用逗号分隔，常见失效主因是父元素overflow:hidden裁剪或color:transparent导致阴影失载。
text-shadow 是唯一正解，别用 box-shadow 去套标题文字——它只作用于容器框，对文字本身无效。
text-shadow 参数顺序不能错
必须是「水平偏移、垂直偏移、模糊半径、颜色」，缺一不可地按这个顺序写。前两个值（偏移）是必填的，哪怕设为 0；blur-radius 和 color 可省略，但位置不能动。
常见失效写法：
-
text-shadow: #000 2px 2px;—— 颜色写太前，整条声明被浏览器忽略 -
text-shadow: 2px 2px 0;—— 没给颜色，且0后面没空格接颜色，实际等价于2px 2px 0 undefined，不渲染 -
text-shadow: 2px 2px rgba(0,0,0,0.5) 4px;—— 把blur-radius放颜色后面，语法错误
正确起步写法：text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
立即学习“前端免费学习笔记（深入）”；
深色背景 vs 浅色背景的配色逻辑
阴影不是越白越亮，关键看反差：它得“托”起文字，而不是吞掉它。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 深底（如
#1a1a1a）配浅色阴影：text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅底（如
#f8f9fa）配深色阴影：text-shadow: 0 0 4px rgba(0,0,0,0.4); - 别用纯黑/纯白——
#000在深底上几乎看不见，#fff在白底上等于没写 - 小字号（blur-radius > 3px 容易糊边；大标题（>32px）可上到
8px或分层叠加
多重阴影叠加才出质感
单层 text-shadow 只能做投影，要发光、浮雕、描边，必须多层逗号分隔，且注意图层顺序：前面的在下，后面的在上。
常用组合：
- 基础发光（柔和外光）：
text-shadow: 0 0 4px #fff, 0 0 8px #fff; - 立体浮雕（上下两层反向）：
text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #fff; - 空心描边（文字透明 + 多向实边）：
color: transparent; text-shadow: 0 0 2px black, 1px 1px 2px black, -1px -1px 2px black;
注意：如果父容器设了 overflow: hidden，而阴影超出边界，就会被裁掉——这是“写了却看不见”的最常见原因。
伪元素和透明文字容易踩坑
用 ::before 或 ::after 插入标题文字时，text-shadow 不会继承，必须单独加在伪元素上。
另外，color: transparent 会让阴影“失载”——text-shadow 依赖文字内容作为载体，没颜色就没阴影。此时得配合 -webkit-text-stroke 或用 background-clip: text 方案补位。
最后提醒一句：别在 body 或全局 p 上设 text-shadow，按钮、表单、链接全跟着发虚，可读性直接崩。
