摘要:在移動端有時的邊框會顯得很粗不美觀,淘寶京東的觸屏均是采用淺細的線條來顯示在移動設備上。
在移動端有時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%要比實際值小,邊框的寬高也會比期望的小。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112089.html
摘要:在移動端有時的邊框會顯得很粗不美觀,淘寶京東的觸屏均是采用淺細的線條來顯示在移動設備上。 在移動端有時1px的邊框會顯得很粗不美觀,淘寶、京東的觸屏均是采用淺細的線條來顯示在移動設備上。具體實現方法如下: 普通的1px黑色實線邊框: border: 1px solid #000; 半像素邊框當然不是簡單地把1px改為0.5px(會被解析成1px),border-width的值只能是自...
摘要:基本上就是將單側投影中的技巧運用兩次,以如下所示在瀏覽器中的效果如下模擬邊框使用屬性可以模擬的效果,以如下所示在瀏覽器中的效果如下我們可以看到利用屬性模擬了的效果,但是與不同的是,使用創建的邊框效果并不會影響元素的尺寸。 1.寫在前面 在CSS3中,可以使用box-shadow屬性來創建陰影效果來給二維平面增加深度效果,這個屬性在前端開發中使用的非常多,例如segmentfault的首...
閱讀 1669·2021-11-17 09:33
閱讀 3531·2021-11-16 11:40
閱讀 3055·2019-08-30 11:23
閱讀 1047·2019-08-29 16:36
閱讀 2464·2019-08-29 13:23
閱讀 1738·2019-08-29 12:59
閱讀 1542·2019-08-29 12:42
閱讀 1978·2019-08-28 18:22