在PC端用1px的边框线，看起来还好，但在手机端看起来就很难看;iphone 可以设置border:solid 0.5px red;;android会把0.5px视为0px，即无边框状态；
2.利用css3新属性scale
给需要加边框的元素插入一个伪类，伪类采用绝对定位，宽高设为200%，然后再缩放为0.5，自然就是0.5px了
<div class="test1"></div>
.test1{
width: 100px;
height: 100px;
position: relative;
}
.test1::after{
content:"";
width:200%;
height:200%;
position:absolute;
top:0;
left:0;
border:1px solid red;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}
副作用 - - - 加分题很重要哦！
当用伪类的绝对定位实现了边框0.5px后，我们在test1类上的点击事件会失效，因此此时的伪类是绝对定位，而且长宽等于父类元素的长宽，是脱离了文档流覆盖在父类上的，伪类不是真实的DOM元素。
解决方法
再写一个绝对定位元素，覆盖在父元素上，层级z-index优先级要高一点
<div class="test1"></div>
.test1{
width: 100px;
height: 100px;
position: relative;
}
.test1::after{
content:"";
width:200%;
height:200%;
position:absolute;
top:0;
left:0;
border:1px solid red;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}
.click-test1{
position:absolute;
top:0;
left:0;
z-index:10;
}
- 利用
background-image
利用背景渐变linear-gradient来实现，具体代码如下：
.test1 {
background-image: -webkit-linear-gradient(0deg,red,red 50%,transparent 50%);
background-image : linear-gradient(0deg,red,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}
分析
`linear-gradient`默认方向从上到下，从0deg到50%的地方颜色是边框颜色，然后下边一半颜色就是透明了-没颜色。中间之所以两个50%写在一起，是因为这样就不会有颜色过渡的渐变效果了，看起来更像一条线，泾渭分明； 然后最关键的是下边的`background-size: 100% 1px;`，就是宽度100%，但高度是1px，注意这里的1px自然是css像素了，加上上边的`background-image`，实际效果就是一半有颜色，一半那不就是0.5px,然后再去掉`repeat`，就实现了。同理如果要写border-left或border-right一样的原理，只需改变方向就可以了。
方向：0deg 、90deg 、180deg 、-90deg
缺点
只能做单方向的`border`，如果有个按钮要加，而且还有圆角，那就无能为力了
- 使用
box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果 样式设置：
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
// 0px：代表垂直方向。 0代表无线段 1px代表左面 -1px代表右面
-1px：代表水平方向。 0代表无线段 1px代表上面 -1px代表下面
后面的两个分别代表[模糊距离][阴影的大小] 无须改动
参考资料：
