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

1、css3使用技巧：细线边框的3种不同的写法最近在做一个h5手机页面项目碰到了一个小小的问题，就是边框描边1像素的问题。例：网易screenshot_2015-07-30-18-34-53-367_网易新闻 普通的app边框描边的线都小于一像素，那么我就像往常一样挺直描了1px的边框，虽然是1px可是结果和app里的描边彻低不一样粗了，所以就在网找了一下看看有没有解决办法，可是找了一会没找到，那咋办，需求方不肯意不要这么粗，那就只能自己解决了。 1，首先想到的办法是做一张高2像素（1像素有色彩1像素没色彩）的做背景，bg-size设置宽100%，高1px .line li background:

2、 url(&39;line.png&39;) left top no-repeat; background-size: 100% 1px; background-position: left bottom; ok，出来了，但有点瑕疵，那么问题来了，左右边框描边虽然可以做旋转(transform) ，但假如要是边框更换色彩那不是还要在做了，好似是有点棘手哦； 2，所以用上个办法联想到了线性渐变（linear-gradient） .line li border: none; background-image: -webkit-linear-gradient(222 50%,tran

3、sparent 50%); background-image: -moz-linear-gradient(222 50%,transparent 50%); background-image: -o-linear-gradient(222 50%,transparent 50%); background-image: linear-gradient(222 50%,transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom; linear-gradi

4、ent linear-gradient linear-gradient ok，又出来了，但还是有点瑕疵，那么问题来了，就是转变描边位置（left，top，right，bottom）需要修改参数 如 left描边需要转变： background-image: -webkit-linear-gradient(left ,transparent 50%,222 50%);background-size: 1px 100%;background-position: left;都不一一列出了，好似还是有点棘手哦； 3，所以想到了css3阴影（box-shadow），就是用阴影做描边然后用伪类把多余的给遮罩着， .line libox-shadow: inset 0 -1px 1px 000;background: fff;margin-left: -1px;margin-bottom: 10px;position: relative;.line li:aftercontent:&39;&39;position: absolute;top:0;left: 0px;right: 0px;botto