表格单元格边框“消失”是因background-color默认按border-box渲染，覆盖边框区域；需显式声明border-style并设background-clip:padding-box才能使背景避开边框。
为什么表格单元格设了背景色后边框就“消失”了
不是边框真的没了，而是 background-color 默认按 border-box 渲染，把边框区域也盖住了。尤其当边框是 rgba() 半透明时，背景色会从底下透上来，和边框颜色混合（比如红底+半透明白边框→粉边框），视觉上就像边框被吃掉。
background-clip: padding-box 在 table 中必须显式声明 border-style
很多表格样式写了 border: 1px solid #ccc，但没写 border-style——而 CSS 规范里 border-style 默认是 none，哪怕写了宽度和颜色，border 实际并不存在，background-clip 就退化为 border-box，根本不起作用。
- 必须显式加
border-style: solid（或dashed/dotted）才能让边框“真实存在” - 只对有真实边框的元素生效；
border: transparent或border-color: transparent仍算“存在”，但需注意视觉是否可辨 - 表格中常用
border-collapse: collapse，此时background-clip对单个td依然有效，但相邻单元格边框会合并，裁剪边界以合并后的边框为准
table td/th 使用 background-clip 的典型写法
直接套用下面这段即可解决多数场景：
td, th {
border: 1px solid #e66;
border-style: solid; /* 关键！不能省 */
background: #ded;
background-clip: padding-box;
}如果还用了 position: relative（比如为了伪元素遮罩或 tooltip 定位），要确保 background-clip 和 position 同级声明，否则某些浏览器（如旧版 Safari）可能忽略裁剪。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的父容器 overflow 影响
表格本身或外层容器若设了 overflow: hidden，会无声裁掉你精心调好的边框外延效果（比如 box-shadow 模拟的描边），排查时先看这一层——它比 background-clip 失效更隐蔽，且不报错。
真正难的不是写对属性，而是意识到：CSS 盒模型里，“背景不盖边框”不是默认行为，而是靠 background-clip 主动退让换来的；一旦边框不存在、或父级裁剪介入，这个平衡就立刻打破。
