不能直接给或加box-shadow，因其默认无尺寸且盒模型边界与视口重合导致阴影被裁；应使用包裹容器（如.page-wrapper）并设置max-width、overflow:hidden、padding:1px等配合box-shadow生效。
直接给 或 加 box-shadow 不可行——浏览器会忽略，因为这两个元素默认不生成独立的盒模型边界（尤其在无明确宽高、未脱离文档流时）。真正能生效的做法，是用一个包裹容器来承载全部内容，再对它加阴影。
为什么不能直接给 body 加 box-shadow
常见错误现象：body { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } 写了但完全没反应。原因有三：
-
默认是“无尺寸容器”，它的高度由子元素撑开，box-shadow作用于其盒模型外缘，而这个外缘常与视口边缘重合，导致阴影被裁掉 - 多数浏览器对
和的盒模型渲染特殊，overflow、border-radius等配合行为不可靠 - 没有
overflow: hidden和border-radius时，即使阴影渲染出来，也容易被父级（如 viewport）截断或视觉上“粘边”
推荐做法：用 div 包裹全部内容再加阴影
这是最稳定、兼容性最好、且语义清晰的方式。关键点不是“加什么”，而是“加在哪”和“怎么配”：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 把所有页面内容（除
<header></header>等需全宽的导航外）放进一个<div class="page-wrapper"> <li> <code>.page-wrapper必须设max-width+margin: 0 auto控制宽度居中，否则阴影会拉满整个视口 - 必须加
overflow: hidden，否则border-radius+box-shadow组合时阴影边缘会溢出 - 建议加
padding: 1px（极小值），防某些浏览器因子元素 margin 折叠导致阴影被意外裁切
body {
margin: 0;
}
.page-wrapper {
max-width: 1200px;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 1px;
}
table、button 等内嵌元素的阴影别和 page-wrapper 冲突
如果你已在表格或按钮上用了 box-shadow，它们会叠加在 .page-wrapper 阴影之上，没问题；但要注意两处易踩的坑：
- 不要给
.page-wrapper设background-color: white后又忘记给内部<table> 清除 <code>border-collapse: collapse带来的边框合并——这会让表格内部线条“吃掉”外层阴影的层次感 - 若用了
filter: drop-shadow()给某个按钮加阴影，它可能在滚动时触发重绘抖动，尤其在 iOS Safari 下；统一用box-shadow更稳 - 暗色模式下，
rgba(0,0,0,0.08)这类阴影颜色不会自动变浅，需用@media (prefers-color-scheme: dark)手动覆盖
真正难的不是写那行 box-shadow，而是决定包裹层级是否合理、overflow: hidden 是否漏掉、以及阴影参数里 spread-radius 和 blur-radius 的平衡——前者撑出实边，后者控制虚化，缺一不可。
