header的box-shadow看不见主因是溢出裁剪、无内边距或层级遮挡；应加margin/padding留空间、用多层外阴影替代inset、适配暗色模式。
直接给 <header></header> 加 box-shadow 是可行的，但多数人加完发现“没效果”或“阴影被裁掉”，根本原因不是语法错，而是容器溢出控制、内边距缺失或层级遮挡。
为什么 header 的 box-shadow 看不见？
常见错误现象：box-shadow: 0 2px 6px rgba(0,0,0,0.1); 写在 <header></header> 上，预览却完全没影子。
- 父容器（比如
或外层<div>）设置了 <code>overflow: hidden—— 模糊半径（blur-radius）超出边界后直接被裁剪 -
<header></header>默认是块级元素，但若它紧贴视口顶部且无margin或padding，阴影会“贴着边缘画”，视觉上等于消失 - 某些 CSS 重置库（如 Normalize.css）清除了
body的默认margin，导致<header></header>顶边与视口齐平，阴影向下偏移后落在可视区外 - 显式设置
margin-bottom: 1px或padding-bottom: 1px，给阴影留出绘制空间 - 避免单用大
blur-radius，例如0 4px 24px rgba(0,0,0,0.15)在窄屏下极易被裁；改用组合：0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.1) - 如果
<header></header>有背景色，建议用rgba()配合透明度，而非依赖opacity—— 后者会让整个 header 内容变透 - 响应式场景下，小屏幕可降级为单层浅阴影：
@media (max-width: 768px) { header { box-shadow: 0 1px 2px rgba(0,0,0,0.05); } } -
inset阴影从 border 边界向内投射，而<header></header>通常无 border，浏览器渲染不可靠 - 即使加了
border: 1px solid transparent，文字/导航栏也会紧贴阴影起点，显得发灰、沉闷 - 真正需要“凹陷感”的是按钮或输入框，不是全局 header；header 要的是“悬浮感”或“分隔感”，外阴影更合适
- 底层（远）：大而虚，营造景深 ——
0 4px 12px rgba(0,0,0,0.06) - 上层（近）：小而实，强化边界 ——
0 1px 2px rgba(0,0,0,0.08) - 注意顺序：必须底层写前面，否则会被盖住；逗号前后不能省略任意参数，
0 2px 4px #000, 0 0 8px #eee合法，但0 2px, 0 0 8px #eee是非法语法
header 加 box-shadow 的安全写法
别只抄参数，重点是让阴影“能露出来、不打架、不卡顿”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
inset 内阴影在 header 上基本不该用
box-shadow: inset ... 放在 <header></header> 上几乎总是错的：
多层阴影用于 header 的实用配比
两层足够，三层开始影响低端 Android 或旧 iPad 的滚动性能：
最易被忽略的一点：阴影颜色在深色模式下不会自动适配，如果项目支持暗色主题，box-shadow 的 rgba() 值必须单独用 @media (prefers-color-scheme: dark) 覆盖，否则会在黑底上变成一团糊。
