text-shadow关键在精准配置：参数顺序必须为h-offset、v-offset、blur-radius、color，推荐双层阴影组合——0 0 0 rgba(0,0,0,0.6)压实轮廓+1px 1px 1px rgba(0,0,0,0.2)增强纵深，避免失效或性能负担。
直接用 text-shadow 就行，但关键不是“加不加”，而是“加在哪、加多少、颜色怎么配”——多数可读性问题靠一层轻量阴影就能解决，加错反而让字更糊。
text-shadow 参数顺序不能错，否则整条声明失效
浏览器只认固定顺序：h-offset v-offset blur-radius color。写成 text-shadow: rgba(0,0,0,0.3) 1px 1px 2px 这种会完全忽略。
- 水平偏移（
h-offset）为正：阴影往右；负：往左 - 垂直偏移（
v-offset）为正：阴影往下；负：往上 -
blur-radius是可选的，但建议显式写上，不写默认为 0（硬边），容易显得生硬 - 颜色推荐用
rgba()，比如rgba(0,0,0,0.2)，比纯黑更自然，避免“压字”感
深色背景上白字，别只用 1px 1px 2px #000
这种写法在高对比下可能过重，尤其小字号时边缘发虚。真正有效的组合是“压实轮廓 + 轻微柔化”两层：
- 第一层：
0 0 0 rgba(0,0,0,0.6)—— 无偏移无模糊，把文字边缘“钉住” - 第二层：
1px 1px 1px rgba(0,0,0,0.2)—— 微偏移+低模糊，制造自然纵深 - 合起来：
text-shadow: 0 0 0 rgba(0,0,0,0.6), 1px 1px 1px rgba(0,0,0,0.2);
注意：逗号必须存在，漏掉就只剩第一层；两层足够，三层以上对渲染负担明显上升，且难以调试。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
图片背景或渐变上放文字，阴影容易被裁剪看不见
常见现象是文字有阴影声明，但预览里完全没影子——大概率是父容器设置了 overflow: hidden 或用了 clip-path，而阴影超出了边界被剪掉了。
- 检查父元素是否含
overflow: hidden、clip-path、transform（尤其是 scale 小于 1） - 临时加
outline: 1px solid red看文字实际渲染区域，确认阴影是否在可视范围内 - 若无法改父容器，可用
margin或padding留出安全边距，比如padding: 4px
移动端和小字号下，阴影锯齿明显怎么办
这不是 text-shadow 的锅，而是字体渲染机制导致的。iOS Safari 和部分 Android WebView 在非 retina 屏或小字号（
- 优先降低
blur-radius到0.5px或1px，甚至设为 0（用纯偏移描边） - 避免用斜体（
font-style: italic）+ 小字号 + 模糊阴影的组合，极易出现毛边 - 可配合
-webkit-font-smoothing: antialiased强制平滑，但仅限 WebKit 内核，且对性能有轻微影响 - 终极方案：换字体，比如用
system-ui或Segoe UI替代细衬线体
最常被忽略的一点：阴影不是万能补丁。如果文字本身颜色和背景对比度低于 WCAG 4.5:1，先调 color 或背景，再加阴影——否则再好的 text-shadow 也救不回可访问性缺陷。
