结论是伪元素+transform:scale()方案必须显式设置box-sizing:border-box，否则height:1px等尺寸计算会受content-box干扰导致定位偏移、溢出或裁剪；伪元素不继承全局box-sizing，需单独声明。
直接说结论：1px边框本身不会引起盒模型溢出，真正导致溢出的是box-sizing: content-box下border和padding被额外叠加进总宽度——而你在高DPR设备上用伪元素画1px边框时，若没同步处理盒模型，就极易触发这个叠加效应。
为什么::after + transform: scale() 还是会溢出
常见错误是只关注缩放，却忽略伪元素自身的盒模型计算逻辑。比如你写了height: 1px + background-color，但没设box-sizing: border-box，当父容器有padding或border时，伪元素的top: 0/left: 0仍按content-box起算，定位偏移几像素，视觉上就像“多出来一截”。
- 伪元素必须显式声明
box-sizing: border-box，否则height: 1px在计算时可能受父级font-size或line-height干扰 -
transform: scaleY(0.5)后，伪元素实际高度变成0.5px CSS像素，但浏览器渲染仍需占位；若父容器overflow: hidden且没预留缩放余量，边缘会被裁掉 - Grid/Flex容器中，伪元素的
position: absolute默认参照的是内容区（content-box），不是padding-box，所以left: 0会从内边距左缘开始算，而不是容器最左边界
box-sizing: border-box 必须作用于伪元素本身
很多人以为全局重置* { box-sizing: border-box }就够了，但伪元素::before/::after不继承该属性，必须单独写。漏掉这步，width: 200% + transform: scale(0.5)四边框方案就会在Grid子项里多出1px白边。
- 正确写法：
.hairline::after { box-sizing: border-box; width: 200%; height: 200%; border: 1px solid #000; transform: scale(0.5); transform-origin: 0 0; } - 别用
border-bottom: 1px替代height: 1px + background-color——前者在content-box下会额外加border宽度，后者更可控 - 如果父容器有
padding，伪元素的left: 0要配合right: 0并设width: 100%，而不是依赖200%强行撑开
移动端真机上textarea边框溢出的特殊处理
微信小程序或某些WebView里，textarea是原生组件，它的border和padding由系统层渲染，CSS的box-sizing几乎无效。此时加伪元素边框反而容易双线叠加、错位更明显。
- 优先放弃
border，改用outline: none+ 父容器border模拟边框 - 若必须用伪元素，父容器需设
overflow: hidden，伪元素z-index: -1并用background-color画底色，再叠一层浅色box-shadow模拟细边框 - 慎用
transform: scale()在textarea上——原生组件对transform支持不稳定，iOS旧版可能出现闪烁或点击失效
真正容易被忽略的是：伪元素的content值不能为空字符串''，必须是' '或'.'等可见字符，否则某些安卓WebView下background-color不生效；而transform-origin写成left bottom在部分Safari版本里会被忽略，必须写成0 100%才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
