凹槽文字需用双层反向text-shadow模拟inset效果：上层浅色高光左上偏移，下层深色阴影右下偏移；禁用inset语法，blur-radius必须显式写0；深色背景需调低高光透明度、提高阴影透明度以保对比；hover时须同步调整text-shadow、box-shadow、transform及border，并用transition控制动画。
text-shadow写凹槽文字必须用反向双层阴影
凹槽（inset）效果不是靠box-shadow，而是用两层方向相反、颜色反差大的text-shadow模拟视觉“压入感”：上层浅色高光往左上偏，下层深色阴影往右下偏。浏览器不支持text-shadow: inset这种写法，硬写会整条失效。
常见错误是只加一层右下阴影（比如text-shadow: 1px 1px 0 #000），结果像投影而非凹陷；或者把颜色写在前面，如text-shadow: #fff 1px 1px 0，整条被静默忽略。
- 正确结构：
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000（先白后黑，白在下层、黑在上层才显“压下去”） - 小字号（≤16px）建议改用
-1px -1px 0 rgba(255,255,255,0.8)，避免纯白在深底上过曝 - 深色背景按钮配浅字时，第二层别用纯黑，改用
rgba(0,0,0,0.4)，否则边缘发硬 - 所有
blur-radius必须显式写0，写成空缺或0.1px会导致 Safari 渲染异常
按钮hover凹陷要同步改text-shadow和box-shadow
单靠text-shadow只能动文字，但真实凹槽按钮的“按下去”感来自文字+容器整体下沉。如果只改文字阴影，按钮框还浮在原位，会显得错位脱节。
典型故障是hover时文字缩进但按钮边框不动，或者文字阴影变深了，可按钮内边距（padding）没压缩，视觉上“没按到底”。
- 文字层：hover时加强反向对比，例如从
-1px -1px 0 #fff, 1px 1px 0 #000→-2px -2px 0 #fff, 2px 2px 0 rgba(0,0,0,0.6) - 容器层：必须加
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2)，配合transform: translateY(1px)模拟物理按压 - 别忘了重置
border：hover时把border-bottom加粗1px、border-right加粗1px，强化“受力挤压”错觉 - 动画要用
transition: all 0.1s ease-out，太慢像卡顿，太快看不出过程
深色背景上凹槽文字容易发灰？调色顺序不能错
在#121212这类深灰背景上，白字+凹槽阴影极易变成“灰蒙蒙一团”，不是参数力度不够，而是颜色叠加顺序和透明度没控住——浅色高光层必须最薄，深色阴影层反而要稍厚一点，才能撑出纵深。
直接套用浅底方案（比如text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000）在深底上会失效，因为#000和背景色几乎同色，失去对比锚点。
- 优先试这个组合：
text-shadow: -1px -1px 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(0,0,0,0.5) - 避免用
hsla()或rgb()无alpha值，没有透明度就无法分层衰减 - 如果文字是
color: #e0e0e0，第二层阴影别用#000，改用rgba(30,30,30,0.7)，贴合文字灰度基线 - macOS Safari 下若高光层看不清，临时加
-webkit-font-smoothing: subpixel-antialiased，禁用 antialiased
伪元素模拟凹槽？不如直接text-shadow逗号分隔
有人想用::before画高光层、::after画阴影层，再叠在文字上。这方案在 Chrome 看着还行，但在 Safari 或旧版 Edge 上极易错位——伪元素的基线（baseline）、字体大小继承、甚至 flex 对齐都会导致两层偏移对不齐，结果不是凹槽，是“文字撕裂”。
更隐蔽的问题是：伪元素 content 若用attr(data-text)注入，iOS Safari 16.6+ 会延迟渲染，hover 动画第一帧直接缺失高光层。
- 真要兼容，全部用单条
text-shadow逗号分隔，语义干净、无重排、路径最短 - 必须写全四参数，哪怕
blur-radius为0也不能省，text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000✅；text-shadow: -1px -1px #fff, 1px 1px #000❌ - 如果需要响应式缩放，偏移量改用
0.05em代替1px，避免大屏下凹陷感变弱 - 别给文字加
opacity动画——它会让高光和阴影一起变淡，凹槽感直接消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
