css 0.5px

1. 利用css3新属性scale（好用推荐）

其实现的关键就是利用before或after伪元素，宽高同时设为200%，然后再缩放0.5，自然就是0.5px了

代码如下：

div {
    positon : relative;
}
div::after {
    content : "";
    width : 200%;
    height : 200%;
    position : absolute;
    top : 0;
    left : 0;
    border : 1px solid #dedede;
    -webkit-transform : scale(0.5);
            transform : scale(0.5);
    -webkit-transform-origin : 0 0;
            transform-origin : 0 0;
    box-sizing: border-box;
}

2. 利用background-image

如果你问切图直接用背景图可不可以？当然可以，虽说这种方法比较笨吧，但也是一种方法。

但我要说的是另外一种--利用背景渐变linear-gradient来实现，具体代码如下：

.bg_border {
    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一样的原理，只需改变方向就可以了。

缺点： 只能做但方向的border，如果有个按钮要加，而且还有圆角，那就无能为力了