text-shadow是CSS文本装饰属性，语法为text-shadow: offset-x offset-y blur-radius color，四值可省略后两项，默认为0和透明色；须带单位（如px），多层阴影用逗号分隔，现代浏览器均支持但IE9+才兼容。

text-shadow 属性的基本写法

文字阴影用 text-shadow 实现，它不是独立元素，而是 CSS 文本装饰属性，必须作用在有文字内容的标签上（比如 <p>、<h1>、<span>）。

语法格式是：text-shadow: <offset-x> <offset-y> <blur-radius> <color>，四个值缺一不可（但后两个可省略为 0 和透明色）。

常见误写：漏掉单位（如写 2 2 4 black 而不是 2px 2px 4px black），浏览器会直接忽略整条声明。

单层阴影 vs 多层阴影的写法差异

单层阴影写一个四元组就行；多层阴影只需用逗号分隔多个四元组，顺序是从近到远叠加（前面的阴影会盖住后面的）。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

text-shadow: 
  1px 1px 2px rgba(0,0,0,0.3),
  -1px -1px 1px rgba(255,255,255,0.5);

• 第一层是右下浅黑模糊影，增强立体感
• 第二层是左上亮白细影，模拟高光
• 注意：多层时每个四元组都必须带单位，不能混用 px 和无单位数值
• 超过 3–4 层容易让文字边缘发虚，尤其小字号下更明显

兼容性与移动端注意事项

text-shadow 在所有现代浏览器中都支持，包括 iOS Safari 和 Android Chrome，但 IE9+ 才开始支持（IE8 及以下完全无效）。

真机调试时容易踩的坑：

• 部分安卓低版本 WebView（如 Android 4.3 系统自带浏览器）对 rgba() 颜色支持不稳定，建议降级用 hsla() 或十六进制色
• 在 Retina 屏上，1px 偏移可能看起来太细，可尝试 0.5px（但需确认浏览器是否支持亚像素渲染）
• 避免对大段正文使用强阴影（如 text-shadow: 0 0 10px #ff0000），会显著拖慢重绘性能

和 box-shadow 混用时的视觉干扰

如果同一个元素同时设了 text-shadow 和 box-shadow（比如按钮），阴影会叠加渲染，可能导致边缘浑浊或颜色失真。

实操建议：

• 优先用 text-shadow 处理文字层次，用 box-shadow 控制容器浮起感，两者偏移方向尽量一致（如都向右下）
• 若文字背景是渐变或图片，强阴影可能被吞掉——此时应增大 blur-radius 或改用深色描边（-webkit-text-stroke）替代
• 不要指望 text-shadow 实现“内阴影”，它天生是外置投影；需要内凹效果得换思路（比如伪元素遮罩）

实际项目里最容易被忽略的是阴影层级和字体渲染的交互：同一套 text-shadow 在 macOS 的 subpixel antialiasing 和 Windows 的 ClearType 下表现差异很大，上线前务必在目标系统截图比对。