极细边框（1px边框）实现方式
移动端 web开发遇到的问题：UI稿上要求设置边框为1px，css设置border: 1px solid #eee;之后，UI又说边框太粗了。
这是因为devicePixelRatio特性导致。css设置的1px是css像素，而UI稿上指的是设备像素，它们之间存在一个比例关系，即，devicePixelRatio。iPhone的devicePixelRatio == 2，而border-width: 1px描述的是css像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
像素基本概念（术语）
device pixel / physical pixel （设置像素、物理像素、硬件像素）： 显示屏中最小的物理单元。 移动设备出厂时，不同设备自带的不同像素，每个像素点根据操作系统的指示设置自己的颜色和亮度。
density-independent pixel(DIP)（设备无关像素或密度无关像素）：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
**CSS pixel （css 像素）：**浏览器使用的抽象单元，用于精确地，一致地在网页上绘制内容。 通常，CSS 像素被称为与设备无关的像素（DIP）。
**devicePixelRatio（设备像素比）：**物理像素和逻辑像素的比例关系，通常可以通过js的 window.devicePixelRatio 来获取。
devicePixelRatio可以用来区分视网膜设备还是非视网膜设备。
devicePixelRatio 值为 1 的屏幕称之为标准屏（也称，非视网膜屏）；目前，大部分移动设备都是高清屏（也称，视网膜屏），即 devicePixelRatio 值大于 1 的屏幕，对于苹果设备来说，我们经常听到 Retina屏（视网膜屏），其中 iPhone6/6s/7 的 devicePixelRatio 值为 2；而 iPhone6 plus/6s plus/7 plus 的 devicePixelRatio 值为 3。
设置0.5px边框
**优点：**实现简单
缺点：retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。
//判断手机是否支持0.5px
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var divElem = document.createElement('div')
divElem.style.border = '.5px solid transparent'
document.body.appendChild(divElem)
if (divElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(divElem);
}
//在html中，加上此样式
.hairlines {
*:not(table tr td),
*:not(.noHairlines) {
border-width: 0.5px!important;
}
}box-shadow（阴影）
**优点：**可以设置圆角
**缺点：**颜色不好控制
border-image（边框背景图片）
使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。
优点：
**缺点：**修改颜色麻烦，需要替换图片；圆角需要特殊处理，并且边缘会模糊。
background-image 渐变
**缺点：**不能实现圆角。
transform: scale(0.5) （推荐，相当灵活）
viewport+rem
**优点：**可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。
**缺点：**样式必须用rem为单位
常见问题
细边框显示不全
原因： 未确定。可能与元素的高度、行高及像素的小点有关
解决方法：
上边框被遮住：如果样式中有
position: absolute； top：50%，可以尝试把改成top: 51%。尽量不要使用
display: inline-block，改用display: block。将
0.5px改为0.7px。指定高度、行高（如：
line-height: normal）。
参考链接
最后更新于
这有帮助吗？