一.思路
普通的1px黑色實線邊框:css
border: 1px solid #000;
半像素邊框固然不是簡單地把1px改成0.5px(沒測試過,可能會被解析成1或者0),border-width
的值只能是天然數css3
相似的,outline, box-shadow
等等也沒有辦法畫出0.5px的細線web
常規思路是不可行的,咱們能夠用僞元素 + 縮放巧妙地實現,具體步驟以下:瀏覽器
設置目標元素做爲定位參照測試
.thinner-border { position: relative; /* 只要不是默認值static便可 */ }
給目標元素添加一個僞元素before或者after,並設置絕對定位spa
.thinner-border:before { content: ''; position: absolute; }
給僞元素添上1px的邊框.net
border: 1px solid red;
設置僞元素的寬高爲目標元素的2倍code
width: 200%; height: 200%;
縮小0.5倍(變回目標元素的大小)orm
transform-origin: 0 0; transform: scale(0.5, 0.5);
把border包進來blog
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%要比實際值小,邊框的寬高也會比指望的小
三.Demo
1像素邊框,block
半像素邊框,block
1像素邊框,inline 半像素邊框,inline-block 半像素邊框,inline,邊框太窄
1/4像素邊框
邊框效果用移動瀏覽器看更明顯,變化的是線寬而不是顏色
注意:雖然理論上邊框能夠任意細(1/n px),但因爲存在精度的問題(精度影響邊框的寬高),因此半像素邊框是最有實用意義的,雖然也存在問題:若是寬高是奇數則邊框位置會偏移0.5px,實際應用中尚可接受