怎么在HTML表格里通过box-shadow属性添加阴影

box-shadow 对 table 元素本身通常无效，因其 display: table 非标准块盒且浏览器支持差；应使用 div 容器包裹 table 并设置 box-shadow、padding 和显式 background，或慎用 display: block 改变 table 显示模式。

box-shadow 对 table 元素本身不起作用？

直接给 <table> 标签加 box-shadow 通常没效果，因为 table 默认是 display: table，不是块级盒子，且部分浏览器（尤其是旧版 Chrome/Safari）对它的盒模型渲染不支持阴影。这不是你写错了，是 CSS 规范和浏览器实现的限制。

真正起作用的是：把 table 包进一个有明确盒模型的容器里，再给这个容器加阴影。

• 推荐用 <div> 包裹 <table>，并设 display: block 或保持默认
• 容器需有非透明背景（否则阴影会被透出的父背景干扰）
• 避免给 table 设 border-collapse: collapse 同时又依赖外层阴影——它会让表格边缘“吃掉”一部分阴影范围

正确写法：用 div 容器 + box-shadow

这是最稳定、兼容性最好的方案。容器承担阴影职责，table 专注语义和结构。

<div style="box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 8px; background: #fff;">  <table>    <tr><td>A</td><td>B</td></tr>  </table></div>

• padding 很关键——给阴影留出绘制空间，否则阴影可能被裁剪
• background 必须显式设置（哪怕就是 #fff），否则容器透明，阴影会叠在下层内容上
• 不要用 overflow: hidden 在容器上，除非你确认阴影不需要外扩（它会直接裁掉阴影）

table 设置 display: block 后能直接加 box-shadow 吗？

可以，但要小心副作用。把 table 强制变成块级元素后，box-shadow 就生效了，但布局行为会变：

立即学习“前端免费学习笔记（深入）”；

• width: 100% 不再自动撑满父容器（需手动设）
• 单元格 border 和 padding 可能因盒模型变化出现错位
• 响应式表现更难控制（比如 table-layout: fixed 配合 display: block 容易崩）

示例（慎用）：

<table style="display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.15); width: 100%; background: #fff;">  <tr><td>A</td><td>B</td></tr></table>

阴影太淡 / 太重？调参要点

box-shadow 四个参数中，最容易误判的是第三项（模糊半径）和第四项（扩散半径）：

• 第二项（垂直偏移）建议用正值（如 2px），避免阴影飘到表头上方，视觉失重
• 第三项（模糊值）超过 12px 在多数 UI 中就显得发虚；低于 4px 则像描边而非阴影
• 第四项（扩散）为正时扩大阴影范围，常配合小模糊值用（如 0 2px 4px 2px rgba(0,0,0,0.1)）
• 颜色透明度别设太高（rgba(0,0,0,0.3) 以上容易压暗表格文字）

真正难调的不是数值，而是容器背景色、字体颜色、周围元素间距这三者的协同——阴影只是其中一环。