移动端复杂边框适配的核心难点是“不糊、不抖、不遮、不崩”，伪元素是唯一兼顾视觉精度、样式控制力和跨dpr一致性的方案，但需规避定位偏移、未设content、未锁transform-origin、box-sizing不当等高频问题。
移动端复杂边框适配的核心难点不在“画出来”，而在“不糊、不抖、不遮、不崩”。伪元素是目前唯一能兼顾视觉精度、样式控制力和跨DPR一致性的方案，但必须绕开几个高频翻车点。
为什么直接写 border: 1px 在 iPhone 上会变粗？
这不是 bug，是物理像素映射结果：iPhone 的 window.devicePixelRatio 是 2 或 3，意味着 CSS 中的 1px 实际占 2 或 3 个物理像素。浏览器不会自动做亚像素抗锯齿对齐，所以边框看起来发虚、加粗、甚至轻微错位。
纯 border 属性无法动态响应 DPR 变化，也不能叠加多层、渐变或非矩形形状——这些都得靠伪元素接管。
::after 画底部边框时位置偏移或消失？
常见原因是定位基点没锁死。缩放会改变伪元素的渲染原点，若不显式指定 transform-origin，scaleY(0.5) 可能从中心压缩，导致边框上浮或截断。
- 必须设
transform-origin: 0 100%（左下角），确保纵向缩放后仍贴底 - 父容器必须有
position: relative，否则::after会相对视口定位 - 伪元素必须带
content: ""，否则压根不渲染 - 加
pointer-events: none，避免遮挡下方点击区域
四边都有边框，还要支持圆角和高 DPR？
单伪元素 + inset: 0 + border-radius 是最简路径，但要注意 box-sizing 和缩放逻辑：
- 伪元素用
box-sizing: border-box，否则宽高 + 边框会撑出父容器 - 先设
height: 2px（DPR=2 时基准），再transform: scale(0.5)，而非直接写height: 1px - 圆角必须设在伪元素上，且值要和父容器一致；若父容器有
overflow: hidden，需确保伪元素不被裁掉 - DPR=3 时，
scale(0.333)比scale(0.5)更准，但多数项目用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 3)
需要渐变、斜切、波浪等不规则边框？
这时候不能只靠 border 或单层伪元素。得拆成两层：外轮廓用 ::before 控制形状，内填充用 ::after 做渐变或遮罩。
例如渐变边框：
- 外层
::before设inset: 0+border-radius+padding: 3px（定义边框厚度） - 用
mask-composite: exclude配合linear-gradient遮罩，只保留 padding 区域显示渐变 - 所有
border-radius、clip-path: inset(... round ...)的圆角值必须用 px 单位，禁用 % 或 em，否则缩放时错位 - iOS Safari 滚动抖动？给伪元素加
transform: translateZ(0)强制图层提升
真正难的不是写出第一版效果，而是当设计要求“这个角再圆一点”“边框颜色随主题切换”“在折叠屏上保持 1px 不变粗”时，还能快速调整、不破布局、不漏兼容性——这些细节全藏在伪元素的 inset、transform-origin 和 mask 组合里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
