css文字阴影与高亮效果_text-shadow应用技巧-css教程-PHP中文网

text-shadow语法要求四值顺序为水平偏移、垂直偏移、模糊半径、颜色，错误顺序或缺值将失效；支持多层逗号分隔、none清除、0模糊实现描边；高亮需控制模糊与透明度；存在性能、对比度、深色模式适配及可访问性问题；复杂场景需DOM方案替代。

css文字阴影与高亮效果_text-shadow应用技巧

text-shadow 语法结构与基础写法

直接写 text-shadow 时，浏览器只认四个值的顺序：水平偏移、垂直偏移、模糊半径、颜色。少一个或顺序错，整条声明就失效。

常见错误是把颜色放前面，比如 text-shadow: #ff6b6b 2px 2px 4px; —— 这会完全不生效，因为浏览器按“长度值”解析，遇到颜色就停了。

正确写法：text-shadow: 2px 2px 4px #ff6b6b;
支持多层阴影，用逗号分隔：text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
设为 none 可清除所有阴影：text-shadow: none;
模糊半径为 0 时等效于硬边投影，适合做文字描边效果

用 text-shadow 实现文字高亮（非 background）

所谓“高亮”，不是加背景色，而是模拟荧光笔划过的效果——靠叠加一层浅色、大模糊、低偏移的阴影来实现视觉膨胀感。

关键在控制模糊半径和透明度：太大显得脏，太小没存在感；纯白容易发灰，带点色相更醒目。

基础高亮：text-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
双层增强（内亮+外晕）：text-shadow: 0 0 4px #ffeb3b, 0 0 12px rgba(255, 235, 59, 0.4);
慎用 inset：CSS 标准里 text-shadow 不支持 inset，写了也无效

性能与可访问性隐患

text-shadow 在低端设备或大量文本节点上可能触发重绘卡顿，尤其当模糊半径 >10px 或叠加超过 3 层时。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

更隐蔽的问题是对比度下降：高亮阴影会让浅色文字在浅底上更难读，WCAG 2.1 对文本对比度有明确要求（至少 4.5:1），而阴影会干扰自动检测工具的判定。

避免在 body 或全局 p 上批量启用高亮式 text-shadow
深色模式下记得重置阴影颜色，否则 rgba(255,255,0,0.6) 在黑底上会过曝
用 prefers-reduced-motion 媒体查询关闭动态阴影（如呼吸式脉动效果）

/* 示例：响应式高亮，兼顾深色模式 */
.highlight {
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  .highlight {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .highlight {
    text-shadow: none;
  }
}