CSS3實現半畫素邊框

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

border: 1px solid #000;

半畫素邊框當然不是簡單地把1px改為0.5px（沒測試過，可能會被解析成1或者0），border-width的值只能是自然數

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

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

設定目標元素作為定位參照

.thinner-border

給目標元素新增乙個偽元素before或者after，並設定絕對定位

.thinner-border:before

給偽元素添上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

.thinner-border:before

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

1畫素邊框，block

半畫素邊框，block

1畫素邊框，inline

半畫素邊框，inline-block

半畫素邊框，inline，邊框太窄

1/4畫素邊框

邊框效果用移動瀏覽器看更明顯，變化的是線寬而不是顏色

注意：雖然理論上邊框可以任意細（1/n px），但由於存在精度的問題（精度影響邊框的寬高），所以半畫素邊框是最有實用意義的，雖然也存在問題：如果寬高是奇數則邊框位置會偏移0.5px，實際應用中尚可接受

實現半畫素邊框/