outline不能通用替代border，仅适用于单色、无圆角、不参与盒模型的视觉边框场景；真正稳定方案是伪元素+scaleY(0.5)模拟物理1px边框。
直接用 outline 替换 border 通常不能解决问题，反而可能引入焦点干扰、圆角失效或盒模型错位——它只是特定条件下的视觉绕过手段，不是通用解法。
为什么 border 在 scale 下必然出现锯齿
缩放时浏览器对 border-width 做亚像素插值（比如 1px → 1.1px），而抗锯齿算法在高 DPR 屏上会把这一像素摊成半透明边缘；border 参与 layout 计算，缩放后坐标落入非整数物理像素位置，光栅化阶段就已注定模糊。这不是 CSS 写法问题，而是渲染管线的固有行为。
outline 替代 border 的真实适用边界
只有同时满足以下全部条件，outline 才可作为临时补救：
-
outline必须是单色、无透明度（如outline: 2px solid #333），不能用rgba()或hsla() - 元素不能设
border-radius，outline 不支持圆角，强行加会导致描边断裂 - 该元素不依赖
border参与尺寸计算（例如box-sizing: border-box下的宽度控制） - 必须显式重置焦点样式：
:focus { outline: none; }，并搭配:focus-visible保可访问性
真正稳定的缩放边框方案
不要试图“修复 border”，而是绕开它的渲染路径：
- 用伪元素模拟边框：
::after绝对定位 +transform: scaleY(0.5)实现物理 1px 下边框，需配position: relative和pointer-events: none - 卡片类容器优先用父级
background-color+border-radius，避免子元素背景拼接导致缩放缝隙 - 带缩放的图标/文字，加
transform: translateZ(0)或will-change: transform触发独立合成层，减少亚像素混合机会 - 若必须保留 border，缩放值尽量选有理数：
scale(0.5)、scale(2)安全；scale(1.1)这类应避免
最容易被忽略的是：锯齿从来不是 border 自己的问题，而是 scale + border-radius + overflow + 高 DPR 多层叠加的结果。先关掉 overflow: hidden 看是否线条消失，再逐项排查，比盲目换属性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
