总结
- 用 scale 缩小
一、为什么需要 0.5px 的线？
在高清屏（如 Retina 屏幕）设备中，1px 的边框在物理像素上可能显示为 2px 或更粗，影响视觉效果。
因此，前端开发中常常需要实现 视觉上的 0.5px 边框或线条，以保证在高清设备上的细腻显示。
二、实现方式汇总
| 方法 | 说明 | 兼容性 |
|---|---|---|
✅ 使用 transform: scaleY(0.5) |
利用缩放实现视觉上的 0.5px 线条 | ✅ 广泛支持（推荐） |
✅ 使用 border-image 或 background-image |
通过图片或渐变实现 | ✅ 支持较好 |
✅ 使用 box-shadow 模拟 |
适用于单边框模拟 | ✅ 支持较好 |
❌ 直接使用 border: 0.5px |
大部分浏览器不支持小数像素 | ❌ 不推荐 |
三、推荐方案：使用 transform 缩放
HTML：
<div class="line"></div>
CSS：
.line {
height: 1px;
background-color: #000;
transform: scaleY(0.5);
transform-origin: 0 0;
}
📌 原理说明：
- 创建一个 1px 高的元素。
- 使用
transform: scaleY(0.5)对其进行纵向缩放，视觉上呈现为 0.5px。 transform-origin: 0 0保证缩放以左上角为原点，避免偏移。
四、其他方案对比
1. 使用 border-image
.line {
height: 1px;
border-top: 1px solid transparent;
border-image: linear-gradient(to right, transparent 50%, #000 50%) 1 100%;
}
📌 优点：支持高清屏，无缩放副作用。
📌 缺点：兼容性略差于 transform。
2. 使用 box-shadow
.line {
box-shadow: 0 0 0 0.5px #000;
}
📌 优点：实现简单。
📌 缺点：性能略差，不适用于大量使用。
五、移动端适配技巧（Retina 屏幕）
在移动端，可以通过媒体查询判断设备像素比（devicePixelRatio）来动态调整样式：
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.line {
transform: scaleY(0.5);
}
}
📌 这样可以确保在高清屏设备上使用缩放边框，在普通设备上使用标准 1px 边框。
六、实际应用场景
| 场景 | 推荐方式 |
|---|---|
| 移动端分割线 | transform: scaleY(0.5) |
| 表格或列表边框 | border-image |
| 伪元素边框 | 结合 ::after + transform |
| 动态适配不同屏幕 | 媒体查询 + transform |
七、注意事项
| 注意点 | 说明 |
|---|---|
不要直接使用 border: 0.5px |
大多数浏览器不支持 |
| 缩放可能影响布局 | 使用 transform 时注意元素位置偏移 |
| 移动端优先考虑适配 | 使用媒体查询适配高清屏 |
| 可结合伪元素使用 | 如 ::after 中实现 0.5px 线条，避免影响主结构 |
八、总结
| 内容 | 说明 |
|---|---|
是否可以使用 border: 0.5px |
❌ 大多数浏览器不支持 |
| 推荐实现方式 | ✅ transform: scaleY(0.5) |
| 替代方式 | ✅ border-image、box-shadow |
| 适用场景 | ✅ 移动端分割线、表格边框、UI 细节优化 |
| 注意事项 | ⚠️ 缩放可能影响布局，建议使用伪元素隔离样式 |