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 ! 注意此处有坑！！！：
对于不同浏览器的兼容，我们需要使用不同的前缀如：
| -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);} |
