移动端实现0.5px的实用方案

我们知道，理论上px的最小单位是1，但在设置px值时，直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。Chrome会把0.5px四舍五入变成了1px，把小于0.5px的当成0，Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px。所以以下就总结了实现0.5px的实现方式。

方案1: 伪元素+scale (兼容性最好，推荐)
实现方式：给容器设置伪元素，设置绝对定位，宽高都是200%，边框是1px，然后使用transform:scale(0.5) 让伪元素缩小原来的一半，此时伪元素的边框和容器的边缘重合。

方案2: 伪元素+背景 (适合设置一条边框，没办法展示圆角)
实现方式：给容器设置伪元素，设置绝对定位，高度1px，背景图设置线性渐变，一半有颜色一半透明，视觉上只有0.5px。

方案3: 利用阴影代替边框
特点：方便，能正常展示圆角，而且能实现0.1px等更细的边框，兼容性还行。

代码实现

<style>
	.box {
	    width: 360px;
	    height: 50px;
	    border-radius: 5px;
	    margin-top: 20px;
	    line-height: 50px;
	}
	
	/* 直接设置border-width */
	.box-normal {
	    border: 0.5px solid red;
	}
	
	/* 方案1：伪元素+scale */
	.box1 {
	    position: relative;
	}
	.box1::after {
	    position: absolute;
	    bottom: 0;
	    z-index: -