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