直接给加box-shadow常失效，因默认border-collapse: collapse压缩外边缘使阴影锚点消失，且父容器overflow: hidden会裁剪阴影；应改用包裹并设box-shadow、border-radius、overflow: hidden，同时内设border-collapse: separate和border-spacing: 0。
直接给 浏览器对 核心是分离结构与样式责任：让 纯 CSS 没有 使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。 真正麻烦的从来不是加阴影，而是让阴影在各种表格尺寸、嵌套层级、主题切换下始终稳定可见——外层容器 + <table> 加 <code>box-shadow 多数情况下会失效或边缘发虚——根本原因是表格默认的 border-collapse: collapse 与阴影渲染冲突，且父容器未做裁剪控制。
为什么 table 直接加 box-shadow 常常没效果或边缘模糊
<table> 元素的盒模型处理较特殊：当 <code>border-collapse: collapse（默认值）启用时，border-spacing 失效，表格边界实际由单元格边框拼合而成，导致 box-shadow 的绘制锚点不清晰；加上多数人忽略 overflow: hidden 的作用范围，阴影常被父容器意外裁掉。
box-shadow 看不见、只在左上角有微弱灰边、圆角处阴影断裂、hover 时阴影突然跳变<table> 的外层容器（如 <code><div>），而非 <code><table> 自身
<li>
<code>border-radius 必须配合 overflow: hidden 使用，且该样式必须写在**外层容器**上，否则圆角+阴影会被截断100%，外层容器建议设 width: fit-content 或固定值，避免阴影被拉宽变形正确写法：用 div 包裹 table 并设置 shadow 容器类
<div> 承担视觉装饰（阴影、圆角、裁剪），让 <code><table> 专注语义和布局。
<ul><li>外层 <code><div class="table-shadow"> 必须含：<code>box-shadow、border-radius、overflow: hidden
<table> 内部需设：<code>border-collapse: separate（关键！否则 border-spacing: 0 不生效）
border-spacing: 0 替代 collapse，它兼容阴影轮廓且更可控 <div class="table-shadow">
<table>
<tr>
<th>姓名</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>北京</td>
</tr>
</table>
</div>
<style>
.table-shadow {
width: fit-content;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.table-shadow table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
</style>
底部单边阴影怎么实现（比如只想要下阴影）
bottom-shadow，但可通过参数组合模拟——关键是控制垂直偏移与扩散，避免水平溢出干扰。
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)
0 表示无水平偏移，4px 垂直向下，6px 模糊半径提供柔和感，-1px 负扩散收窄阴影底部宽度，防止盖住下边框blur-radius（如改 3px），而非加大负扩散——后者易导致阴影断裂padding-bottom，否则 overflow: hidden 会裁掉阴影底部容易被忽略的兼容性与性能细节
box-shadow 在现代浏览器中已无兼容问题（IE9+ 支持），但实际项目里真正踩坑的是隐性约束。
rgba() 指定透明度，不要依赖浏览器默认色——各引擎对未声明 color 的处理不一致box-shadow: 0 2px 4px ..., 0 -1px 2px ...）会增加绘制开销，表格区域大时可能引发低端设备卡顿rgba(0,0,0,0.1) 会显得过重，需配合 @media (prefers-color-scheme: dark) 覆盖颜色值blur-radius 和 spread-radius 建议用 rem 或 em，避免在高 DPR 屏幕上过虚separate + 显式宽度，这三点漏掉任意一个，就等于埋了个视觉雷。
