scaleY(0.5)能变细下边框，是因为先用height: 2px绘制物理高度为2px的线条，再纵向压缩50%，在dpr=2设备上精准对应1物理像素；关键需设transform-origin: left bottom锚定底部、父元素加position: relative、伪元素加pointer-events: none防点击拦截。
为什么 scaleY(0.5) 能让下边框变细
移动端写 border-bottom: 1px 看起来像 2px，不是你代码错了，是设备像素比（dpr）在起作用。iPhone 13 的 dpr=3，浏览器把 1 个 CSS 像素映射成 3×3 物理像素，border-bottom: 1px 就真画出了 3 像素高的线。用 transform: scaleY(0.5) 是“骗”渲染层：先画一条 2px 高的线，再纵向压缩一半，视觉上就回归 1px。
关键不在缩放本身，而在锚点控制——必须让缩放以底部为原点，否则线会往上飘。
-
transform-origin必须设为left bottom或0 100%，不能省略 - 父元素必须有
position: relative，否则::after会相对 body 定位 - 别用
border-bottom: 1px再缩放，某些 Android WebView 对 border 缩放渲染异常；改用height: 2px+background-color - 必须加
pointer-events: none，否则伪元素可能拦截点击
单边细线（如下边框）的标准写法
这是最常用也最容易出错的场景，比如列表项分隔线、卡片底部线。以下是最小可用且兼容性稳妥的写法：
.border-bottom-1px {
position: relative;
}
.border-bottom-1px::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
pointer-events: none;
}
注意几个硬性条件：
立即学习“前端免费学习笔记（深入）”；
-
content: ''不能为空字符串，哪怕只是空格也不行；部分低版本安卓 WebView 会忽略空content - Android 低版本 WebView 对
scaleY支持弱，可 fallback 到transform: scale(0.5)（同时缩 X/Y），但需同步调整width/height为 200% - 如果父容器有
padding-bottom，bottom: 0默认从 content-box 起算，需手动减去 padding 值，或改用box-sizing: border-box
四边细线为何不能只套用 scaleY
单边用 scaleY(0.5) 没问题，但四边一起上必须整体缩放，否则盒模型会打架。直接给伪元素写 top: 0; left: 0; right: 0; bottom: 0; + border: 1px solid 再 scaleY(0.5)，结果是上下边被压扁，左右边不变——线粗细不一致，四角还会露白。
正确做法是统一用 scale(0.5)，并确保尺寸和盒模型可控：
- 伪元素宽高设为
width: 200%; height: 200%，再transform: scale(0.5)缩回原尺寸 - 必须显式声明
box-sizing: border-box，否则border: 1px会让总尺寸变成 200% + 2px，缩放后仍溢出 -
transform-origin改为0 0（左上角），避免缩放中心偏移导致边框错位 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁掉——因缩放基于原始尺寸计算，200% 的区域会被截断
dpr=3 设备（如 iPhone 14 Pro）下 scaleY(0.5) 为什么不准
硬写 scaleY(0.5) 只对 dpr=2 设备有效（如 iPhone 6/7/8）。在 dpr=3 设备上，它实际渲染的是 1.5px 物理像素，依然偏粗。
真正精准的做法是动态适配：
- 用 JS 读取
window.devicePixelRatio，计算缩放比1 / dpr - 例如 dpr=3 →
transform: scaleY(0.333)；dpr=4 →scaleY(0.25) - 通过 class 切换或注入 style 标签实现，纯 CSS 媒体查询（如
@media (-webkit-min-device-pixel-ratio: 3)）只能覆盖整数档，无法处理 dpr=2.75 等非整数情况 - Safari 对 subpixel transform 渲染不稳定，dpr=3 场景建议 fallback 到
box-shadow或linear-gradient方案
真正容易被忽略的是：缩放后的伪元素在父容器宽高动态变化时可能触发重排，尤其低端 Android 机易掉帧；大量使用该方案时，GPU 负担会上升，圆角边框还会失真——缩放会扭曲弧度，此时应改用背景渐变模拟。
