真正立体表头需box-shadow（上下双层阴影）、垂直渐变背景和border-bottom协同模拟光影：顶部细白边为高光，底部软阴影为投影，渐变强化体积感，参数须精准控制避免廉价感。
HTML 表头本身没有“立体质感”这种内置样式，所谓立体效果全靠 CSS 的阴影、渐变、边框和背景叠加模拟出来——不是加个 class 就自动立体，而是得手动调参，稍一过火就显得廉价。
用 box-shadow + 渐变背景模拟立体感
纯色背景+单层阴影太扁平，真正有厚度感的表头要同时控制：顶部浅色高光、底部深色投影、中间过渡渐变。关键不是堆效果，而是让光的方向一致。
-
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0)提供垂直明暗过渡，比单色更有体积感 -
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 -1px 1px #fff—— 下方软阴影模拟“压下去”，上方细白边模拟“光线反射” - 别忘了
border-bottom: 1px solid #ccc，这是强化“边缘厚度”的最后一笔，尤其在浅色背景下特别有效 - 如果表格用了
border-collapse: collapse，<th> 的 <code>border-bottom会和<td> 的上边框重叠，建议统一用 <code>border-bottom控制表头下沿，数据行用border-top避免“假立体”：常见翻车点
很多所谓“立体表头”看着像按钮，实际是设计失控——不是效果不够，而是过度叠加导致视觉疲劳或语义模糊。
- 别用
text-shadow模拟浮雕文字：它会让屏幕阅读器误读、缩放时糊成一团，且与高对比度模式冲突 - 慎用
transform: translateY(-1px)伪造“凸起”：这会让<th> 脱离正常流，影响 <code>position: sticky固定表头的计算（top值会错位） - 渐变角度别设
to right：横向渐变在窄列里几乎看不出变化，垂直方向才符合人眼对“光照从上往下”的直觉 - 阴影扩散值（
blur）超过6px就开始发虚，失去“硬朗立体感”，推荐2px–4px区间 -
z-index必须显式设为大于 1 的值（如z-index: 10），不能依赖默认层叠顺序 - 父容器（通常是
<table> 或外层 <code><div>）若设了 <code>overflow: hidden，会把box-shadow剪掉，必须改成overflow: visible或确保容器足够大 - 如果用了
background-clip: padding-box（防止背景溢出内边距），记得同步加-webkit-background-clip: padding-box，否则 Safari 里阴影会断层 - 立体感在滚动瞬间容易闪烁，加
will-change: transform到<th> 可缓解，但仅在必要时启用，避免过度触发 GPU 渲染 <p>立体感本质是光影错觉，参数调得再细，也抵不过在真实设备上多刷几次页面看效果——尤其是低亮度屏幕和 OLED 屏，渐变和阴影表现差异很大。</p> </th>
适配 sticky 固定时的立体感保全
一旦给
<th> 加了 <code>position: sticky，某些立体样式会失效或错位——比如z-index不够时被滚动内容盖住，或者box-shadow被父容器裁切。立即学习“前端免费学习笔记（深入）”；
- 别用
