background-clip 默认画满 border-box 区域，设为 padding-box 无效主因是 border-style 未显式声明、border-color 透明或 background 简写重置了 clip；需同时满足显式 solid 边框、独立声明 clip、避开 transform 等干扰。
背景色“渗透”到 border 下方不是 bug，而是 background-clip 默认行为 —— 它本就该画满 border-box 区域。
background-clip: padding-box 为什么没生效？
写了 background-clip: padding-box 却发现背景还是盖住了 border，大概率是因为：
-
border-style没显式声明（默认是none，哪怕写了border-width和border-color，border 实际也不存在） -
border-color是transparent或带 alpha 值（视觉上“看不见”，但 background-clip 仍按真实 border 存在裁剪，容易误判为失效） - 用了简写
background属性（它会重置background-clip为默认的border-box）
移动端 Safari 中 background-color 穿透更明显？
是的。高 DPR 屏幕下，border-style: solid + background-color 组合时，背景色默认铺满 border 区域，加上亚像素渲染和抗锯齿逻辑，边框常显得发虚或变浅。
解决它必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
border-style: solid（或dashed/dotted） - 独立声明
background-clip: padding-box（别混在background里） - 避开干扰渲染层的属性：如父级
transform、button元素的-webkit-appearance: none、border-radius+overflow: hidden组合
background-clip 和 background-origin 混用时的坑
两者作用点不同：background-origin 控制“从哪开始画”，background-clip 控制“画到哪为止”。常见错误：
- 只设
background-clip: padding-box，但background-origin是content-box→ 背景从内容区定位，却只显示到 padding 边缘，图像可能被意外裁掉 - 用了
background-image却没配background-origin: padding-box→ 图片起始位置偏移，边缘被padding-box截断 - 设了
background-clip: text，又同时写background-clip: padding-box→ 后者会被忽略（text值与 box 类型互斥）
真正难的不是记住取值，而是意识到：只要 border 没真实存在、或渲染层被硬件加速打乱、或 background 简写覆盖了 clip 设置，所有配置都会白搭。
