Webapp中的CSS3實現 0.5px的細線
感覺很長時間沒寫過博客了，最近生活還算穩定，過得較為充實，所以又要開始寫寫東西了，一個是為了做些記錄，是怕自己某一天，忘記了，回頭翻翻博客，就會再次的拾起來，記憶，就是這樣。
曾看過淘寶，京東，易迅，一號店等等電商的移動端網站，這些大的電商站的共同特點是做的精致，用戶體驗良好，其中在布局方面 ， 0.5px的線看上去就比1px的線看上去要精致很多。
方法一：使用漸變來做
html代碼：
| <div></div> |
css代碼：
| .bd-t{ position:relative;}.bd-t::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);} |
Be careful ! 注意此處有坑?。。。?/p>
對于不同瀏覽器的兼容，我們需要使用不同的前綴如：
| -webkit-linear-gradient-ms-linear-gradient -o-linear-gradient |
坑就在這些前綴里： 我們把代碼里的height 1px 變成 100px , 參數同為 0deg, transparent 50%, #e0e0e0 50% 并使用最新版的chrome來測試 。
linear-gradient 有如下結果：
經過一系列的測試總結，我們可以推理出下面的漸變方式：
webkit-linear-gradient 的代碼效果圖如下：
經總結，我們看到-webkit前綴的漸變方式為：
其他的前綴如果用到，還請小伙伴們自己來嘗試填坑！
說明：
推薦這種寫法，這是百度糯米移動站的做法(如果沒改版的話)：http://m.nuomi.com/ ，從上述代碼的描述中，可以看到，為了實現盒子頂部邊框0.5px的偽代碼：border-top：0.5px solid #e0e0e0; 的效果，使用after，作為一個鉤子，寬度100%，高度1px,背景漸變，一半透明，一半有顏色，這么干是可以的。同理，底部，左邊和右邊的細線，都是同一個道理了。當然，如果需要組合使用，盒子之間的嵌套使用，也是可以的，或者你有自己的想法(當然做法有很多種！)…
方式二： 使用縮放
html代碼：
| <div></div> |
css代碼：
| .bd-t{ position:relative;}.bd-t:after{ content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #e0e0e0; /* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */ -webkit-transform: scaleY(.5); transform:scaleY(.5);} |
