记录移动端 - 0.5px

在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;
}
复制代码

2. 利用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`，若是有个按钮要加，并且还有圆角，那就无能为力了

3. 使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果 样式设置：

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
// 0px：表明垂直方向。 0表明无线段 1px表明左面 -1px表明右面
-1px：表明水平方向。 0表明无线段 1px表明上面 -1px表明下面
后面的两个分别表明[模糊距离][阴影的大小] 无须改动
复制代码

参考资料：

1. css实现各类0.5px的线 小结
2. 1px? 0.5px!
3. 移动端绘制0.5像素的几种方法(整理) 4.7 种方法解决移动端 Retina 屏幕 1px 边框问题 5.《使用Flexible实现手淘H5页面的终端适配》