transparent边框本身不导致锯齿，但会暴露亚像素渲染缺陷：在border-radius含小数、transform旋转、高DPI屏或合成层下，透明区域采样失真被放大，引发毛边；outline替代方案已失效，推荐改用rgba(0,0,0,0.001)兼顾渲染可控性与视觉隐蔽性。
透明边框（border: 1px solid transparent）本身不会“导致”锯齿，但会暴露底层渲染缺陷——它让浏览器必须在无颜色信息的边界上做亚像素采样，从而把抗锯齿误差直接变成肉眼可见的毛边或白边。
为什么border: 1px solid transparent在圆角/旋转/高DPI屏下特别容易出锯齿
transparent 不是“空”，而是 rgba(0,0,0,0)。当它参与 border-radius 路径计算或 transform 合成时，渲染引擎无法可靠推断边缘该用什么色值做过渡，尤其在以下情况：
- border-radius 值含小数（如
12.3px），路径无法对齐物理像素 - 元素有
transform: rotateY(30deg)，火狐等浏览器对 transparent 边框的 GPU 光栅化精度更低 - 在 Retina 屏上，1px CSS 像素被映射为 2×2 物理像素，transparent 区域采样失真被放大
- 父容器用了
opacity或backface-visibility: hidden，强制整个元素进入合成层，文字/边框统一降级为灰度抗锯齿
别再用outline: 1px solid transparent硬凑——它只是掩耳盗铃
这个技巧在旧版 Firefox 上看似有效，是因为 outline 绕过了部分盒模型计算，但它不响应 border-radius，也不参与 layout 流程，实际带来新问题：
- outline 永远画在 border 外侧，圆角容器四角仍会露底
- 在 Safari 16.4+ 和 Chrome 115+ 中，outline 的抗锯齿策略已和 border 对齐，效果趋同
- 若同时用了
box-shadow，outline 会和阴影层叠错位，反而加重边缘断裂感
真正有效的替代方案（按优先级排序）
核心思路：**不用 transparent 占位，改用可控的视觉替代**：
- 要保留 border 框架语义 → 改用
border: 1px solid rgba(0,0,0,0.001)，极低 alpha 值既触发边框渲染管线，又几乎不可见，且能参与抗锯齿计算 - 要兼容老 Safari（border-radius: 12px; overflow: hidden，内层用
box-shadow: 0 0 0 1px #000模拟边框 - 要精确控制边缘质感 → 放弃 border，用伪元素 +
background: linear-gradient()+background-clip: padding-box，并加transform: translateZ(0)强制 GPU 渲染 - 动画中频繁出现锯齿 → 必须加
backface-visibility: hidden，否则图层未稳定分组，滚动/rotate 时抖动会放大所有渲染误差
最常被忽略的一点：锯齿是否出现，和你写的 transparent 关系不大，而取决于「这个边框是否参与了最终像素合成」。只要它出现在一个开启了 will-change、filter 或 transform 的上下文中，就大概率被拖进低精度渲染路径——这时候换颜色不如稳图层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
