【css】如何实现移动端敏感的0.5px

如下几种方法能实现0.5px边框：

1.伪元素2倍尺寸1px边框scale缩小一半 推荐

给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transform: scale(0.5) 让伪元素缩小原来的一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。这种方法兼容性最好，4个边框都能一次性设置，能正常展示圆角，推荐使用。

2.使用背景渐变实现1px背景的一半

给容器设置伪元素，设置绝对定位，高度为1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框，没法展示圆角。

3.设置0.5px阴影扩散半径

用阴影代替边框，设置阴影box-shadow: 0 0 0 .5px #000; 使用方便，能正常展示圆角，兼容性一般。

4.直接设置0.5px边框

直接设置 border-width: 0.5px； 使用方便，但兼容性不好。