CSS3如何实现0.5边框

在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法以下：

普通的1px黑色实线边框：

border: 1px solid #000;
复制代码

半像素边框固然不是简单地把1px改成0.5px（会被解析成1px），border-width的值只能是天然数

相似的，outline, box-shadow等等也没有办法画出0.5px的细线

常规思路是不可行的，咱们能够用伪元素 + 缩放巧妙地实现，具体步骤以下：

设置目标元素做为定位参照

.thinner-border {
    position: relative; /* 只要不是默认值static便可 */
}
复制代码

给目标元素添加一个伪元素before或者after，并设置绝对定位

.thinner-border:before {
    content: '';
    position: absolute;
}
复制代码

给伪元素添上1px的边框

border: 1px solid red;
复制代码

设置伪元素的宽高为目标元素的2倍

width: 200%;
height: 200%;
复制代码

缩小0.5倍（变回目标元素的大小）

transform-origin: 0 0;
transform: scale(0.5, 0.5);
复制代码

把border包进来

box-sizing: border-box;
复制代码

简言之就是先放大再缩回来，border-box是关键，不然边框不会一块儿缩放

二.具体实现

上面已经分步骤写得很清楚了，拼在一块儿就是完整实现：

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
复制代码

功能是给class值指定了thinner-border的block和inline-block元素添上半像素的边框，由于inline元素的width和height有一些限制，伪元素获取到的200%要比实际值小，边框的宽高也会比指望的小。