perspective 对 border 锯齿无效，因其仅影响含 Z 轴的 3D 变换，而 scale() 是 2D 操作，不触发透视投影；浏览器不会用 perspective 重算 border 插值，反而可能引发合成层抖动。
单纯加 perspective 不能修复 transform: scale() 导致的边框锯齿，它甚至可能让问题更隐蔽——因为 perspective 不影响 border 的 sub-pixel 插值过程，只改变 3D 投影关系。
为什么 perspective 对 border 锯齿无效
perspective 的作用对象是具备 Z 轴位移或旋转的子元素（比如用了 translateZ() 或 rotateY()），而纯 scale() 是 2D 变换，不进入透视投影流程。浏览器压根不会拿 perspective 去重算 border 宽度，所以加了也白加。
更麻烦的是：一旦你误加了 perspective 却没配 transform-style: preserve-3d 和真正的 3D transform，反而可能触发额外的合成层切换，导致渲染抖动，让锯齿看起来“忽隐忽现”。
真正该盯住的渲染链路节点
border 锯齿本质是 layout 尺寸 × devicePixelRatio × sub-pixel 插值 × 抗锯齿策略 四层叠加的结果。缩放时最常出问题的环节其实是：
立即学习“前端免费学习笔记（深入）”；
-
border自身宽度被插值（如1px→1.05px） -
border-radius在缩放后圆角采样失真 -
overflow: hidden边界与缩放后像素边界错位，漏出父背景 - 高 DPR 屏上，浏览器用灰度抗锯齿替代 sub-pixel，边缘发虚
能起效的实操组合（非单点替换）
如果你必须用 scale() 且要保边框清晰，这几个条件得同时满足：
- 把
border换成outline，但必须加outline-offset: -1px对齐视觉位置（outline默认外扩） - 给元素设
background-color，避免缩放后露出父级背景形成“假线条” - 若含圆角，
border-radius值建议用整数（如8px），别用百分比（50%在缩放下易变形） - 移动端加
will-change: transform，提前创建合成层，减少重光栅化次数
示例片段：
.card {
background: #fff;
outline: 1px solid #ddd;
outline-offset: -1px;
border-radius: 8px;
will-change: transform;
}
.card:hover {
transform: scale(1.05);
}
最容易被忽略的陷阱
很多人调了半天 perspective 值，却没检查 transform-origin。默认是 50% 50%，但如果你的元素本身有 margin 或 transform: translate()，实际缩放中心会偏移——这会导致 border 在缩放过程中“滑动”，加剧像素错位感。务必显式写死：transform-origin: 0 0 或 center center，并确认它和你的布局逻辑一致。
