text-shadow 三个参数为水平偏移、垂直偏移、模糊半径；模糊半径宜设1–4px，小字号慎超2px，深色字配浅背景推荐1px 1px 2px rgba(0,0,0,0.3)；多层用逗号分隔，描边常用四方向0模糊阴影，浮雕用上下双影；高dpr屏需媒体查询增大模糊值；gpu渲染或opacity/filter易致文字发虚。
text-shadow 的三个参数怎么配才不糊成一团
模糊半径不是越大越好，它和字体大小、颜色对比度强相关。设为 0 是硬边投影，设为 1px 到 4px 是常用清晰范围；超过 6px 在多数正文字体下就开始发虚、失焦。
- 小字号（
12px–14px）慎用模糊半径 >2px，否则投影会“吃掉”字形细节 - 深色文字配浅色背景时，
text-shadow: 1px 1px 2px rgba(0,0,0,0.3)比0 0 4px更易读 - 模糊半径为
0时，必须显式写0，不能省略——省略会导致浏览器忽略整个声明
多层 text-shadow 实现立体/描边效果的实际写法
单个 text-shadow 只能投一个影，但逗号分隔可叠加多层，顺序从左到右依次渲染，后写的在上层。常用来模拟描边（外发光）或浮雕（上下双影）。
- 描边：用 4 个方向偏移
1px的同色阴影，比如text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 - 浮雕感：先写深色下偏移影（
0 2px 2px rgba(0,0,0,0.3)），再叠浅色上偏移影（0 -1px 1px rgba(255,255,255,0.5)） - 别写太多层——超过 5 层可能触发某些旧版 Safari 的渲染降级，且无实际可感知提升
text-shadow 在高 DPI 屏幕上的模糊半径适配问题
CSS 像素单位（px）在 Retina 屏上会被缩放，但 text-shadow 的模糊半径不会自动按设备像素比放大，导致投影看起来更细、更锐利，甚至“断开”。这不是 bug，是规范行为。
- 用
rem或em单位无法解决这个问题——模糊半径只接受px、em、rem等长度单位，但计算时仍基于 CSS 像素 - 真正有效的做法是：对高 DPR 设备，手动增大模糊值，例如用媒体查询
@media (-webkit-min-device-pixel-ratio: 2)把2px改成3px - 注意：Chrome 115+ 和 Safari 17 已开始支持
text-shadow的 subpixel 渲染优化，但 Firefox 仍较保守，实测需保留兼容写法
text-shadow 导致文字变模糊的常见误操作
不是所有模糊都来自模糊半径本身。很多“字变糊了”其实是渲染策略冲突引起的，尤其在 transform 或 will-change 场景下。
- 给文字容器加了
transform: translateZ(0)或will-change: transform，会强制 GPU 渲染，而部分浏览器对带text-shadow的文本做 GPU 合成时精度下降 - 使用
font-smoothing: antialiased时，阴影会加剧灰阶过渡，主观感觉“发虚”——可改用font-smoothing: subpixel-antialiased（仅 macOS） - 父元素设置了
opacity或filter，会触发新的层叠上下文，导致text-shadow被整体模糊一次（额外合成层）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
