box-shadow模拟1px边框可行但需严控参数：用box-shadow: 0 1px 0 0 #ccc等无blur描边写法，避开rgba、overflow:hidden及inset负向陷阱，否则易现黑边或不显示。
可行，但必须控制参数、规避渲染陷阱，否则在安卓 WebView 或旧版 Safari 上会变成“1px黑边”或直接不显示。
box-shadow 模拟 1px 的核心写法
本质是用 box-shadow 的 v-offset + spread 组合出物理像素级描边，而非依赖模糊（blur）——后者在高 DPR 屏上必然发虚。
-
box-shadow: 0 1px 0 0 #ccc：最稳，1px 下边框，无模糊，纯描边 -
box-shadow: inset 0 -1px 0 0 #e0e0e0：内下边框，适合表单项底部强调 - 避免写
box-shadow: 0 1px 1px -1px #000：blur: 1px在 DPR=3 机型（如 iPhone 15 Pro）上实际渲染≈0.33物理像素，边缘灰雾、颜色变深 - 别用
inset 0 1px ...做上边框：iOS Safari 对负方向inset渲染异常，容易裁掉
为什么有些 box-shadow 在安卓上变“粗黑边”
根本原因是安卓 WebView（尤其 Android 9–11 内置）对 box-shadow 的 spread 和颜色混合处理不一致，rgba(0,0,0,0.5) 可能被当全黑渲染。
- 固定用十六进制色值（如
#ddd），避开rgba()透明度计算差异 - 删掉所有
blur值（即设为0），它不是“精细”的必要条件，反而是失真源头 - 确保父容器没设
overflow: hidden—— 它会硬裁 shadow 区域，导致边框断开 - 若元素本身有
border-radius，box-shadow会自然跟随，但需确认background-clip: padding-box（默认值），否则圆角处可能透底
和 transform: scale(0.5) 方案比，box-shadow 有什么代价
box-shadow 不占布局空间，也不触发重排，但会悄悄改变视觉边界，引发内部对齐错位。
- input 框加了
box-shadow后文字贴左？补padding-left: 14px（原 12px），给 shadow 留出视觉余量 - 清除按钮（×）位置偏右？不能靠
box-shadow“推”，得手动调padding-right - 深色模式下别写死
#ccc，改用@media (prefers-color-scheme: dark) { .input { box-shadow: 0 1px 0 0 #444; } } - 绝对定位元素加
box-shadow后偶尔闪一下？加transform: translateZ(0)强制合成层，比will-change更轻量
真正容易被忽略的是：box-shadow 模拟 1px 时，你其实已经放弃了「语义边框」。如果后续要 JS 读取 element.style.border 或依赖 border 盒模型计算，这个方案会彻底失效——它只是视觉欺骗，不是真实 border。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
