利用CSS3的线性渐变linear-gradient制作边框的示例

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

1. .line li{  border: none;   
2.   background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
3.   background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
4.   background-image: -o-linear-gradient(#222 50%,transparent 50%);   
5.   background-image: linear-gradient(#222 50%,transparent 50%);   
6.   background-size:  100% 1px;   
7.   background-repeat: no-repeat;   
8.   background-position: bottombottom;}  

1. <ul class="line">  
2.     <li>linear-gradientli>  
3.     <li>linear-gradientli>  
4.     <li>linear-gradientli>  
5. ul>  

OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数

如 left描边需要改变：

1. background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
2. background-size:  1px 100%;   
3. background-position: left;  

具体的都不一一列出了。

利用linear制作复杂的边框效果
另外，在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：

1.      
2.      
3. "en" xmlns="http://www.w3.org/1999/xhtml">     
4.      
5.     "utf-8" />     
6.          
7.          
8.      
9.      
10.     "box first">