background-clip: padding-box 能解决 background-color 穿透 border 问题，但仅对纯色背景有效；若含 background-image，需配合 background-origin: padding-box，否则图像错位。
为什么 background-color 会穿透到 border 下面
移动端 Safari 和部分 Android 浏览器中，当元素设置了
+
（没设
），且
是
或
时，背景色默认会绘制在 border 区域内——也就是「穿透」了 border，看起来像边框变浅或发虚。这不是 bug，是 CSS 规范里
和
的默认行为在高 DPR 屏幕下更明显。
background-clip: padding-box 真的能解决问题吗
能，但只对纯色背景有效；它让背景绘制区域收缩到 padding box 内，不覆盖 border box。但要注意：如果同时用了
（哪怕只是渐变），
就必须配合
才能对齐，否则图像可能被裁掉一部分。
（默认）→ 背景铺满整个 border 区域
→ 背景止于 padding 边界，不进 border
→ 背景只在内容区，慎用，容易露白
示例：
移动端真机上仍失效？检查这三点
即使写了
，iOS Safari 有时还是透色，常见原因：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
父容器有
（如
、
）触发了硬件加速，导致渲染层合并异常，背景重绘逻辑错乱
元素启用了
且是
，某些 iOS 版本会忽略
用了
+
组合，Safari 会强制将背景扩展到 border 外围做抗锯齿，此时
失效
临时绕过方案：把
拆成
+
模拟，或者用伪元素画边框。
比 background-clip 更稳的替代写法
如果项目要兼容 iOS 14–15 或低端 Android WebView，直接放弃
更省心。推荐用
模拟边框：
或者用伪元素：
真正容易被忽略的是：border 颜色透明度在不同设备上渲染差异极大，尤其是
这类低 alpha 值，在 iOS 上常被优化掉或变灰，建议改用十六进制半透色（如
）或直接提升 alpha 值。
borderbackground-colorbackground-imageborder-stylesoliddoublebackground-originbackground-clipbackground-imagebackground-clip: padding-boxbackground-origin: padding-boxbackground-clip: border-boxbackground-clip: padding-boxbackground-clip: content-box.btn {
background-color: #007aff;
border: 2px solid rgba(0, 122, 255, 0.3);
background-clip: padding-box; /* 关键 */
}background-clip: padding-boxtransformtranslateZ(0)scale(1)-webkit-appearance: nonebackground-clipborder-radiusoverflow: hiddenpadding-boxborderoutlinebox-shadowbackground-clipbox-shadow.btn {
background-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3); /* 替代 border */
/* 不设 border，避免穿透风险 */
}.btn {
position: relative;
background-color: #007aff;
}
.btn::after {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border: 2px solid rgba(0, 122, 255, 0.3);
pointer-events: none;
}rgba(0,0,0,0.1)#0000001a