CSS3实现手机1px边框，细如发丝

前言

我们使用手机App的WebView和浏览器查看网页时，经常能看见那细如发丝的“0.5px”的边框、线条，让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢，web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准，如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法，如果小弟理解的有什么错误，欢迎各位大神指点！！！

实现原理

1px像素如果只显示一半，那是否就是所谓的“0.5px”像素？问题的答案很相近，现在就来揭秘它的实现原理，CSS3提供了一个强大的属性，Gradients渐变，这个属性让前端拥有像设计师一样的能力，不需要PS就能绘制一幅五彩冰纷的彩色图。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

我们这里需要用到的是线性渐变（Linear Gradients），如果让一天1px的线条实现上到下两种颜色的渐变，那么这条1px像素细线是否就拥有了2中颜色，如果有一种颜色为透明，那么是不是意味着它实现了所谓的“0.5px”.

devicePixelRatio（密度比）

解释完“0.5px”实现原理，这边需要再次提及devicePixelRatio这个属性，根据移动端屏幕分辨率的不同，每个终端机的屏幕密度比也不一样，“0.5px”需要适配不同密度比的设备它也需要设置不同的适配样式，前几年大部分的安卓机的devicePixelRatio值是2，这几年很多手机越来越注重用户的体验，所以密度比相对有所提高，一部分的安卓机devicePixelRatio值为3，当然苹果手机很早就实现了devicePixelRatio=3。如何获取设备的devicePixelRatio值，大家可以参考我上篇博客检测手机类型、密度比和物理宽高

实现1px边框的渐变

这边先用一行渐变的代码来解释下渐变的原理

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, red))

1
第一个属性：linear 定义渐变的类型 线性渐变

第二个属性：left bottom 定义渐变开始的起始点 左下角向上渐变

第三个属性：left top 定义渐变结束点 左上角像下渐变

第四个属性：color-stop(0.5, transparent) color-stop方法创建色标点。含有两个参数，第一个参数表示渐变点的在整个渐变范围内的位置，以小数表示；第二个参数为颜色，可以使用RGBA的形式表示，这样可以指定颜色的透明度。

上面代码如果使用在1px边框中，那么这1px有一半颜色为透明，一半颜色为红色,这样就构建一条头发丝细的“0.5px”线条。当然上面的代码不足以构建能够使用的“0.5px”像素边框，下面附上一个能够使用的“0.5px”像素的样式。

@media screen and (-webkit-device-pixel-ratio: 2){
.minPx-top{border:0;}
.minPx-top {
background-position: left top;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, red), color-stop(0.5, red));
}
.minPx-top{
background-repeat: repeat-x;
-webkit-background-size: 100% 1px;
}
}

1
2
3
4
5
6
7
8
9
10
11
上面代码大家可以用一个div标签加上minPx-top样式尝试下，在手机端-webkit-device-pixel-ratio: 2和PC端对比一下，看下线条之间的区别。

总结

头发丝边框已经成为移动端线条的趋势，很多网站为了加强用户体验都使用“0.5px”像素。这次只讲解在密度比为2的手机端实现“0.5px”细如发丝边框的方法，当然大家可以尝试下如何在-webkit-device-pixel-ratio: 3的情况下实现“0.5px”边框。除此之外，可以尝试实现 div上下左右 边框使用组合，“0.5px”圆角边框。