table直接加box-shadow无效，因border-collapse:collapse导致外边缘塌陷；应改用div包裹并设overflow:hidden、table设border-collapse:separate与border-spacing:0。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

box-shadow直接加在

上为什么没效果？

因为默认的 border-collapse: collapse 会让表格边框“塌陷”，导致 box-shadow 的渲染边界模糊，阴影边缘发虚甚至被裁掉。更关键的是：浏览器对 table 元素的盒模型处理较特殊，直接加阴影容易被父容器或自身布局干扰。

正确做法是把 box-shadow 加在包裹 table 的外层容器（比如 div）上，并配合以下三点：

• 给外层 div 设 overflow: hidden（防止圆角+阴影溢出）
• 给 table 设 border-collapse: separate 和 border-spacing: 0
• 外层 div 显式设置宽度（如 width: fit-content 或具体值），避免阴影被拉宽失真

只想要底部阴影，怎么写box-shadow参数？

纯 CSS 没有 bottom-shadow 这种属性，但可以用参数组合模拟——核心是控制垂直偏移为正、水平偏移为 0、用负的 spread-radius 收窄左右发散，让阴影“钉”在下方。

推荐写法：box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1)

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

• 0：水平不偏移
• 4px：向下偏移 4px，形成底部落差
• 6px：适度模糊，避免生硬
• -2px：负扩散收缩阴影宽度，防止左右“晕开”盖住边框
• 别用 inset——那是内阴影，方向反了

多层阴影怎么叠加才不卡顿？

逗号分隔的多组 box-shadow 值不是数学叠加，而是按书写顺序从远到近逐层绘制：第一个最靠后（环境光），最后一个最靠前（贴边高光）。顺序错了，层次就塌了。

常见安全结构：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15)

• 两层足够表达深度，三层以上在 iOS Safari 低端机上可能掉帧
• 每组参数必须完整，不能省略 blur-radius 或 color（哪怕写 0 或 transparent）
• 避免 blur-radius > 24px 且无 spread-radius 补偿，否则易被 overflow: hidden 裁剪

圆角表格阴影边缘漏光怎么办？

加了 border-radius 却发现阴影在弧角处“毛边”或透出白底，本质是模糊区域超出了圆角轮廓。这不是 bug，是渲染逻辑使然。

解决方法只有一个：用负的 spread-radius 把阴影向内收一收。

• 例如：box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.1)
• 负值越小（如 -4px），收得越紧，但过大会让阴影变细甚至消失
• 务必搭配 overflow: hidden 在外层容器上，否则负扩散可能让阴影被裁掉
• 别指望靠调低 blur-radius 解决——那只是让边缘锐利，不解决漏光

实际应用中，box-shadow 参数顺序和负值使用是最容易被跳过的细节；一旦漏掉 spread-radius 或写错位置，效果就会偏离预期，而且浏览器不报错，只能靠肉眼比对调试。