首页手记 CSS 如何制作 0.5 像素的细线

CSS 如何制作 0.5 像素的细线

标签：

Html/CSS

移动技术的出现，将屏幕显示技术带入 Retina 级别，现在绝大部分移动端设备都达到或者超过了 Retina 级别，但是由于移动端的屏幕分辨率和浏览器的分辨率有一些换算关系，导致在浏览器中的 1 个像素会占用屏幕的 2 个或者 2 个以上的像素，这样使得 Mobile Web 的 UI 在精细程度上大打折扣。但是我们还是有技术的手段来解决这个问题。

border-width: 0.5px

直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，对于 Android 无法支持。不过个人相信时间会让它成为最佳可行方案。

.border {
    border: 1px #000 solid;
    }
    @media(min-device-pixel-ratio: 2) {
      border-width: 0.5px;
}

当然对于这种兼容性问题我们可以通过 JavaScript 来做降级处理，我们将默认边框设置为1px，分辨出来是 iOS 并且版本为 8 以上，就可以将边框设置为0.5px；

缺点:

兼容性问题。

利用 box-shadow

我们也可以利用 box-shadow 的阴影来绘制出0.5px的线，只需要将阴影的偏移半径设置的足够小，模糊半径设置为1px。这种比较难控制，颜色很难取，并且它并不是一条真是的线。

.border {    box-shadow: 0 -1px 1px -1px rgba(0, 0, 0, .5),
                    -1px 0 1px -1px rgba(0, 0, 0, .5),
                    1px 0 1px -1px rgba(0, 0, 0, .5),                    
                    0 1px 1px -1px rgba(0, 0, 0, .5);
}

缺点：

仔细观察它并不是一条实线；
由于是阴影，要取到想要的颜色很难。

border-image

其实就是利用图片的缩放来解决这个问题，需要一张 6*6px 的图片，做成特殊的透明框线图；但是它不支持圆角。

.border {   
 border-width: 1px;   
 border-image: url(border.png) 2 repeat;
}

缺点：

需要额外的图片；
不支持圆角边框；
颜色固定，无法随意设置。

viewport

利用动态的改变<viewport>让网页的像素区域和屏幕的像素区域重合，这样就很轻松的去写1px的边框，并且它会等于屏幕本身的1px。

//当 devicePixelRatio = 2 输出：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
//当 devicePixelRatio = 3 输出：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

缺点：

Mobile APP 在设计上会存在问题（我们会在专门的 viewport 中去讲解）

利用伪类的缩放

利用 ::before 或 ::after 画出是DOM的尺寸 2 倍或 3 倍的绝对定位伪对象，使用 1px 的 border 定义新边框后，让后通过设置 transform 的 scale 把伪类对象缩小到一半或 1/3，这样看上去伪对象就和容器一样大了。

.border {   
 border-bottom: 1px solid #ccc;
}
@media (min-device-pixel-ratio: 2) {
    .border {     
       position: relative;      
       border-bottom: none;
    }  
      .border::after {     
       content: ' ';      
       display: block;    
        position: absolute;     
        left: 0;      
        bottom: 0;     
        width: 200%;     
        height: 0;      
         border-bottom: 1px solid #ccc;      
         transform: scale(0.5) translate(-50%, -50%);
    }
}

缺点：