CSS3如何實現0.5邊框

在移動端有時1px的邊框會顯得很粗不美觀，淘寶、京東的觸屏均是採用淺細的線條來顯示在移動設備上。具體實現方法以下：

普通的1px黑色實線邊框：

border: 1px solid #000;
複製代碼

半像素邊框固然不是簡單地把1px改成0.5px（會被解析成1px），border-width的值只能是天然數

相似的，outline, box-shadow等等也沒有辦法畫出0.5px的細線

常規思路是不可行的，咱們能夠用僞元素 + 縮放巧妙地實現，具體步驟以下：

設置目標元素做爲定位參照

.thinner-border {
    position: relative; /* 只要不是默認值static便可 */
}
複製代碼

給目標元素添加一個僞元素before或者after，並設置絕對定位

.thinner-border:before {
    content: '';
    position: absolute;
}
複製代碼

給僞元素添上1px的邊框

border: 1px solid red;
複製代碼

設置僞元素的寬高爲目標元素的2倍

width: 200%;
height: 200%;
複製代碼

縮小0.5倍（變回目標元素的大小）

transform-origin: 0 0;
transform: scale(0.5, 0.5);
複製代碼

把border包進來

box-sizing: border-box;
複製代碼

簡言之就是先放大再縮回來，border-box是關鍵，不然邊框不會一塊兒縮放

二.具體實現

上面已經分步驟寫得很清楚了，拼在一塊兒就是完整實現：

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
複製代碼

功能是給class值指定了thinner-border的block和inline-block元素添上半像素的邊框，由於inline元素的width和height有一些限制，僞元素獲取到的200%要比實際值小，邊框的寬高也會比指望的小。