最近在做一个H5手机页面项目遇到一个小问题，就是边框笔画是1像素。

例子：网易截图_ 2015-07-30-18-34-53-367 _网易新闻

一般追踪app边框的线不到一个像素，我就照常直接追踪1px的边框。虽然是1px，但是结果和app里的描摹完全不一样，就在网上看了看有没有解决的办法，过了一段时间也没找到。我该怎么办？如果需求方不愿意不那么厚，我只能自己解决。

1.种思路是做一个2像素高度的图片(1像素有颜色，1像素没有颜色)作为背景。bg-size设置为宽，1px高。line li{

background: url('line.png ')左上方无重复；

background-size : 1px；

背景-位置：左下方；}

ul class='line '

li/li

li/li

li/li

/ul

好了，出来了，但是有点尴尬，那问题来了。左右边框笔画虽然可以变换，但是如果边框变色，就没必要做图了，好像有点麻烦；

2，所以最后一种方法与线性梯度相关。line li { border: none

background-image :-web kit-linear-gradient(# 222 50%，透明50%)；

背景-图像：-moz-线性-渐变(#222 50%，透明50%)；

背景-图像：-o-线性-渐变(#222 50%，透明50%)；

背景图像：线性渐变(#222 50%，透明50%)；

background-size : 1px；

背景-repeat:不重复；

背景-位置：底部；}

ul class='line '

li近梯度/li

li近梯度/li

li近梯度/li

/ul

好吧，又出来了，但是还是有些瑕疵。那么问题来了，就是改变笔画位置(左、上、右、下)需要修改参数

如果左笔画需要改变：

background-image :-web kit-linear-gradient(左，透明50%，# 222 50%)；

background-size : 1px ；

背景-位置：左侧；

没有一一列举，似乎还是有点麻烦；

3，所以我想到了CSS3的盒影，就是用阴影来描边，然后用伪类来覆盖多余的。线Li { box-shadow : inset 0-1px 1px # 000；背景# fffmargin-left :-1px；margin-bottom : 10px；相对位置：}。{ content : }后的第li:after行；位置：top:0left: 0pxright: 0pxbottom: 0pxborder: 1px实心# fff}

ul class='line '

libox-shadow/li

libox-shadow/li

libox-shadow/li

/ul