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，若是有個按鈕要加，並且還有圓角，那就無能爲力了