css3使用技巧：细线边框的3种不同的写法

最近在做一个H5手机页面项目遇到了一个小小的问题，就是边框描边1像素的问题。
例：网易

 

一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。

1，首先想到的方法是做一张高2像素（1像素有颜色1像素没颜色）的图片做背景，bg-size设置宽100%，高1px

.line li{  
            background: url('line.png') left top no-repeat;
            background-size: 100% 1px;
            background-position: left bottom;}

<ul class="line">
    <li></li>
    <li></li>
    <li></li>
</ul>

OK，出来了，但有点瑕疵，那么问题来了，左右边框描边虽然可以做旋转(transform) &#x