Frozen UI中提取的半像素边框

    <style>
       .quit-t 
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-top: 1px solid #e0e0e0;
    border: 0;
    background-position: left top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-x;
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
} 


.quit-b
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-bottom: 1px solid #e0e0e0;
    border: 0;
    background-position: left bottom;
<span style="white-space:pre">	</span>background-image:linear-gradient(to bottom, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(top, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-x;
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
}


.quit-tb
{
    border-top: 1px solid #e0e0e0;
    border-bottom: #e0e0e0 1px solid;
    background-image: none;
    border: 0;
<span style="white-space:pre">	</span>background: linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%) left top repeat-x,linear-gradient(to bottom, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%) left bottom repeat-x;
<span style="white-space:pre">	</span>background: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%) left top repeat-x, -ms-linear-gradient(top, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%) left bottom repeat-x;
<span style="white-space:pre">	</span>background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) left bottom repeat-x; 
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
}


.quit-l
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-left: 1px solid #e0e0e0; 
    border: 0;
    background-position: left top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to right, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(left, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-y;
    -webkit-background-size: 1px 100% ;
<span style="white-space:pre">	</span>background-size: 1px 100% ;
} 


.quit-r
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-right: 1px solid #e0e0e0; 
    border: 0;
    background-position: right top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to left, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(right, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-y;
    -webkit-background-size: 1px 100% ;
<span style="white-space:pre">	</span>background-size: 1px 100% ;
}
       </style> 

（做了一些补充，把所有边框情况都提取出来了，兼容ie11，不过list上的一些特殊属性没有加上去，使用时可能会造成两个半像素重叠后恢复成1像素的问题）

用腾讯的Frozen UI最大的感悟就是它的半像素，原理就是通过渐变把1像素的下面部分弄成透明，因此只要把各个浏览器的渐变css写上去就可以实现兼容