HTML5如何给文字加阴影_textshadow属性参数详解与实例【详解】_网络技术

发布时间 - 2026-01-09 00:00:00 点击率：次

text-shadow语法必须严格按「水平偏移垂直偏移模糊半径颜色」顺序书写，前两个参数必填，模糊半径为0时边缘锐利，多层阴影用逗号分隔，错误顺序将被浏览器忽略。

很多人写 text-shadow 时把颜色放前面，或者漏掉某个值，结果阴影完全不生效。它不是 CSS 自动推导的属性，四个参数位置固定，且前两个（偏移量）为必填项。

合法写法只有这几种组合：

text-shadow: 2px 2px #000;（仅偏移 + 颜色，模糊半径为 0）
text-shadow: 2px 2px 4px #000;（完整四参数）
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);（支持透明度）
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;（多层阴影，用逗号分隔）

错误示例：text-shadow: #333 2px 2px; 或 text-shadow: 2px #333 2px; —— 浏览器会直接忽略整条声明。

初学者常以为 blur-radius 越小文字越清晰，其实它是控制阴影边缘是否发虚。设为 0 时，阴影就是硬边矩形块；设为 1px 以上才开始有渐变过渡。

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

这对「描边效果」很关键：要实现干净的文字外描边（比如白字黑边），必须用多个方向的 0 模糊阴影模拟，而不是依赖一个带模糊的阴影。

text-shadow: 
  -1px -1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;

注意：上面每个阴影的 0 不能省略，否则浏览器会把后面的颜色误认为是模糊值。

text-shadow 是纯静态渲染，CSS 动画能驱动它的偏移或颜色变化，但无法像 filter: drop-shadow() 那样自动跟随元素轮廓、支持内阴影或 SVG 扩展。别指望它实现「文字投影随鼠标移动」这种效果——那得靠 JS + canvas 或 WebGL。

兼容性要点：

性能上，大量使用高模糊值（如 20px）在低端 Android 设备上可能造成重绘卡顿，建议模糊半径控制在 0–8px 内。

三者常被混淆，但渲染机制完全不同：

text-shadow：只作用于文字内容（textContent），不作用于空格、伪元素生成的内容（除非显式设置）
box-shadow：作用于整个盒模型边界，对文字无效（除非文字撑满容器且背景透明）
filter: drop-shadow()：基于元素 Alpha 通道做图像级投影，能正确绕过圆角、mask、透明区域，但对行内文本支持不稳定（尤其换行或 letter-spacing 场景）

典型踩坑：给加 filter: drop-shadow(2px 2px 4px #000)，结果阴影被父容器裁剪或在 Firefox 中不显示——这时应换回 text-shadow。

复杂点在于：如果文字用了 transform: scale() 或 font-size 动态变化，text-shadow 的像素值不会自动缩放，需配合 calc() 或 JS 重设；而 filter 的阴影会随变换一起缩放。