bootstrap按钮在retina屏边缘模糊的本质是1px边框被2x dpr拉伸为2物理像素且未亚像素对齐，导致灰边发虚；修复需用伪元素+scaley(0.5)模拟0.5px边框，并清除原border、设transform-origin、避免布局干扰。
Bootstrap按钮在Retina屏边缘模糊，本质是1px边框被2x DPR拉伸成2物理像素线
不是Bootstrap写错了CSS，而是border: 1px solid #ccc在设备像素比为2的屏幕上，浏览器必须用2×2个物理像素去渲染这“1px”，而原始边框没有亚像素对齐控制，结果就是灰边、发虚、左右不对称。常见于MacBook Pro、iPhone真机，DevTools里看到computed border-width仍是1px，但实际渲染已失真。
直接改border值无法修复，必须用伪元素+缩放方案
试图把border改成0.5px或thin无效——CSS规范不支持小数像素边框（除个别WebKit实验性支持），且浏览器会四舍五入回1px。真正可行的是放弃原生border，改用伪元素模拟：
- 给按钮加
position: relative（否则::after定位失效） - 用
::after画一条height: 2px的线，再transform: scaleY(0.5)压回视觉1px -
transform-origin必须设为top center（上边框）或bottom center（下边框），否则缩放后偏移 - 避免同时保留
border和伪元素——会叠加出2px视觉厚度
Bootstrap类名本身不触发高清适配，需手动加修饰符类
Bootstrap 3/4/5 都没内置.btn--retina-border这类语义类。你得自己定义，比如：
.btn-retina-border::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transform: scaleY(0.5);
transform-origin: top center;
}
关键点：
- 颜色用
currentColor，继承按钮文字色，不用硬编码#ddd - 不要覆盖
.btn原有border，先清掉：border: none - 若按钮有圆角，伪元素需配合
border-radius裁剪，否则直角线会露出来
容易忽略的布局干扰：浮动、flex、transform会让伪元素错位
即使伪元素代码写对了，在Retina屏下仍可能偏1px，常见诱因：
- 父容器用了
float且未清除，导致高度塌陷，伪元素top: 0计算基准偏移 - 按钮在
display: flex容器中，且父级设了align-items: center，引发sub-pixel baseline偏移 - 按钮自身有
transform: scale(0.99)之类微调，会干扰伪元素的transform-origin锚点 - 系统字体缩放开启（如iOS「更大字体」），让
em/rem单位计算出现非整数值，连带影响伪元素位置
最稳的兜底做法：所有参与高清边框的容器，确保height、line-height、padding都用整数px值，禁用%或em驱动的关键尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
