直接给 <thead> 加 box-shadow 无效，因其是语义容器、无尺寸且不参与盒模型渲染；阴影必须加在有明确盒模型的 th 或其容器上，并配合 position: sticky、z-index、text-shadow 等协同实现表头“浮出”效果。
为什么直接给 加 box-shadow 没用
因为 是语义容器，不参与盒模型渲染，它本身没有尺寸、不占布局空间，box-shadow 无法锚定到一个“可见边界”上。你看到的表头视觉区域实际是 th 元素撑开的，阴影必须落在有明确盒模型的元素上——也就是 th 或包裹它的容器。
用 position: sticky + z-index + box-shadow 组合强化表头层级
单纯加阴影不够，表头需要“浮在数据之上”的错觉，这靠层叠顺序 + 空间反馈实现：
-
th 必须设 position: sticky; top: 0;，否则滚动时无法固定
-
z-index: 2 不可省略（不能是 1），否则可能被父容器的 overflow: hidden 截断或被 tbody 内容盖住
-
box-shadow: 0 2px 6px rgba(0,0,0,0.08) 加在 th 上，比加在 更精准；避免用大模糊值（如 12px），容易让文字边缘发虚
- 配合
background-clip: padding-box，防止背景色溢出到边框，确保边框清晰、阴影干净
text-shadow 是表头文字专属增强，别加错地方
text-shadow 只对文本生效，必须直接写在 th 上——加在 、 或 上完全无效，因为那些元素不直接渲染文字。
- 推荐轻量组合：
text-shadow: 0 1px 1px rgba(0,0,0,0.15);（模拟自然光感，不抢戏）
- 深色背景换浅色阴影：
text-shadow: 0 -1px 1px rgba(255,255,255,0.3);
- 避免
text-shadow: 0 0 5px #000 这类无偏移+高模糊，字会晕开、可读性下降
- 如需 hover 增强，过渡必须加在
th 上：transition: text-shadow 0.2s ease;，且不要和 color 变化共用同一过渡，否则跳变明显
移动端没有 hover，但表头仍需视觉确认
桌面端靠悬停，移动端靠点击态或状态标记——这点常被忽略，导致用户在触屏设备上分不清当前聚焦行或表头是否激活。
立即学习“前端免费学习笔记（深入）”；
- 用
:active 替代 :hover 实现点击反馈，例如：th:active { text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
- 更稳妥的做法是 JS 添加临时 class（如
is-active），控制阴影强度或加微小 transform: scale(1.02)
- 别依赖纯颜色变化（比如只改
background-color），它缺乏空间感，用户无法感知“层级上升”
真正起作用的不是阴影本身，而是它和 position: sticky、z-index、text-shadow 的协同节奏——少一个，表头就只是“固定”，而不是“浮出”。
box-shadow 无法锚定到一个“可见边界”上。你看到的表头视觉区域实际是 th 元素撑开的，阴影必须落在有明确盒模型的元素上——也就是 th 或包裹它的容器。
用 position: sticky + z-index + box-shadow 组合强化表头层级
单纯加阴影不够，表头需要“浮在数据之上”的错觉，这靠层叠顺序 + 空间反馈实现：
-
th必须设position: sticky; top: 0;，否则滚动时无法固定 -
z-index: 2不可省略（不能是 1），否则可能被父容器的overflow: hidden截断或被 tbody 内容盖住 -
box-shadow: 0 2px 6px rgba(0,0,0,0.08)加在th上，比加在 更精准；避免用大模糊值（如 12px），容易让文字边缘发虚- 配合
background-clip: padding-box，防止背景色溢出到边框，确保边框清晰、阴影干净text-shadow 是表头文字专属增强，别加错地方
text-shadow只对文本生效，必须直接写在th上——加在 、或 上完全无效，因为那些元素不直接渲染文字。
- 推荐轻量组合：
text-shadow: 0 1px 1px rgba(0,0,0,0.15);（模拟自然光感，不抢戏） - 深色背景换浅色阴影：
text-shadow: 0 -1px 1px rgba(255,255,255,0.3); - 避免
text-shadow: 0 0 5px #000这类无偏移+高模糊，字会晕开、可读性下降 - 如需 hover 增强，过渡必须加在
th上：transition: text-shadow 0.2s ease;，且不要和color变化共用同一过渡，否则跳变明显
移动端没有 hover，但表头仍需视觉确认
桌面端靠悬停，移动端靠点击态或状态标记——这点常被忽略，导致用户在触屏设备上分不清当前聚焦行或表头是否激活。
立即学习“前端免费学习笔记（深入）”；
- 用
:active替代:hover实现点击反馈，例如：th:active { text-shadow: 0 2px 4px rgba(0,0,0,0.3); } - 更稳妥的做法是 JS 添加临时 class（如
is-active），控制阴影强度或加微小transform: scale(1.02) - 别依赖纯颜色变化（比如只改
background-color），它缺乏空间感，用户无法感知“层级上升”
position: sticky、z-index、text-shadow的协同节奏——少一个，表头就只是“固定”，而不是“浮出”。 - 配合
