在H5移动端开发中实现0.5px的细线是一个非常经典的问题。这背后的根本原因在于设备的物理像素和CSS的逻辑像素之间的关系，也就是设备像素比（Device Pixel Ratio, DPR）。
例如，在DPR为2的Retina屏幕上，1个CSS像素实际上占据了2x2=4个物理像素。因此，你写的 border: 1px solid black; 实际上会渲染成一条2物理像素宽的线，这在视觉上就显得比较粗。我们想要实现的0.5px线，在DPR为2的屏幕上，其目标就是渲染出1物理像素的宽度。
直接写 border-width: 0.5px; 在某些iOS的WebKit内核浏览器中可能会生效，但在Android和许多其他浏览器中，0.5px会被四舍五入到1px或直接忽略为0px，导致表现不一致。因此，我们需要一些更可靠的“黑科技”或技巧来实现它。
以下是几种主流的实现方式，我将从原理、优缺点和适用场景进行分析。
方案一：使用伪元素 + transform: scale()（最推荐）
这是目前最常用、最灵活且兼容性最好的方案。
原理：
利用伪元素（::before 或 ::after）生成一个1px的线，然后通过CSS的 transform 属性将其缩放50%。因为 transform 的缩放是亚像素级别的，可以精确地将1px的视觉元素缩小为0.5px。
实现代码 (以底部边框为例):
CSS
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px; /* 先画一条1px的线 */
background-color: #e0e0e0;
/* 根据DPR进行缩放 */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
transform: scaleY(0.5); /* Y轴方向缩小一半 */
transform-origin: 50% 100%; /* 从底部中心开始缩放 */
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
transform: scaleY(0.33333); /* 对于DPR=3的屏幕 */
}
}
实现垂直线，只需将 scaleY 换成 scaleX，并调整宽高和位置即可。
优点：
-
兼容性好：
transform属性在移动端浏览器支持非常广泛。 -
效果精准：可以实现真正的1物理像素线，线条清晰、颜色纯正。
-
可定制性强：可以轻松应用到元素的任意边，也可以实现圆角（通过给容器设置
overflow: hidden和border-radius）。 -
不产生额外DOM：使用伪元素，保持HTML结构干净。
缺点：
-
代码量稍多：相对于单一属性，需要写一个完整的伪元素规则。
-
占用伪元素：如果该元素已经需要使用
::before或::after做其他事情，会产生冲突。 -
对于已有边框的元素：处理起来会更复杂一些，例如给一个已有
border的input元素再加0.5px的线。
方案二：使用 box-shadow 模拟边框
原理：
box-shadow 的第四个参数（扩展半径）可以接受小数值。通过设置一个没有模糊、没有偏移、扩展半径为0.5px的阴影来模拟一条细线。
实现代码 (以顶部边框为例):
CSS
.hairline-top {
/* x偏移 y偏移 模糊半径 扩展半径 颜色 */
box-shadow: 0 0.5px 0 0 #e0e0e0;
}
优点：
-
代码极其简单：一行CSS即可搞定。
-
不产生额外DOM，也不占用伪元素。
-
可以方便地给四条边都加上（通过逗号分隔多个
box-shadow规则）。
缺点：
-
颜色可能变淡：浏览器对阴影的渲染方式与边框不同，可能会做抗锯齿处理，导致0.5px阴影的颜色看起来比实际设置的颜色要浅一些。
-
性能隐忧：在大量元素上使用
box-shadow理论上会比border有更大的性能开销，但在常规使用场景下影响不大。
方案三：使用 linear-gradient 渐变
原理：
将元素的背景（background-image）设置为一个1px高的渐变，渐变的上半部分（50%）为线条颜色，下半部分（50%）为透明。这样就模拟出了一条0.5px的线。
实现代码 (以底部边框为例):
CSS
.hairline-bottom {
background-image: linear-gradient(to bottom, transparent, transparent 50%, #e0e0e0 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
}
优点：
-
代码相对简洁。
-
不产生额外DOM，不占用伪元素。
-
适用性好，可以应用到任何一边。
缺点：
-
颜色同样可能变淡：和
box-shadow类似，渐变背景的渲染也可能导致颜色不如transform方案的纯粹。 -
语法稍显晦涩：对于不熟悉渐变的人来说，代码不如
box-shadow直观。 -
会覆盖原有背景：如果元素本身有背景图或背景色，此方案会覆盖掉。
方案四：使用SVG Data URI
原理：
创建一个1x1像素的SVG，在其中绘制一条0.5像素的线。然后将这个SVG进行Base64编码，作为 border-image 或 background-image 来使用。
实现代码 (以底部边框为例):
CSS
.hairline-bottom {
border-bottom: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20height%3D'1px'%20width%3D'100%25'%3E%3Cline%20x1%3D'0'%20y1%3D'1'%20x2%3D'100%25'%20y2%3D'1'%20stroke%3D'%23e0e0e0'%20stroke-width%3D'0.5'%2F%3E%3C%2Fsvg%3E") 1 stretch;
}
注：上述SVG代码为了可读性未完全URL编码，实际使用时需要编码。
优点：
-
效果精准：SVG是矢量图形，可以精确控制线条宽度，渲染效果非常清晰。
-
浏览器原生支持，兼容性好。
缺点：
-
代码可读性差：Base64编码后的字符串很长，不直观且难以维护。
-
修改不便：每次想修改线条颜色或样式，都需要重新生成SVG和编码。
-
有额外的HTTP请求开销（如果作为外部文件引用），但作为Data URI则会增大CSS文件体积。
总结与最终推荐
| 实现方式 | 原理 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|---|
伪元素 + transform |
1px线 + 缩放 | 效果精准、兼容性好、灵活 | 代码稍多、占用伪元素 | ★★★★★ |
box-shadow |
0.5px阴影扩展 | 代码极简、不占伪元素 | 颜色可能变淡 | ★★★★☆ |
linear-gradient |
1px渐变背景 | 代码简洁、不占伪元素 | 颜色可能变淡、覆盖背景 | ★★★☆☆ |
| SVG | 矢量图形 | 效果精准、矢量 | 代码复杂、维护困难 | ★★☆☆☆ |
我的最终推荐是：
首选方案：伪元素 + transform: scale()
这是目前社区公认的最佳实践。它提供了最好的平衡性：效果精准、兼容性好，而且通过封装成一个通用的CSS类（如 .hairline-top, .hairline-left 等），可以在项目中非常方便地复用，最大程度地减少了其“代码量稍多”的缺点。这个方案最接近“一劳永逸”的解决方案。
次选方案：box-shadow
如果你只是需要在一个或两个地方快速实现一个单边的细线，且对线条颜色没有极端严格的要求，box-shadow 是最快、最省事的选择。它非常适合快速原型开发或者需求简单的场景。
在实际项目中，可以定义一套基于**伪元素+transform**的工具类，作为项目的基础样式库，这样在任何需要0.5px线的地方，只需添加一个类名即可，兼顾了效果和开发效率。