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写上去就可以实现兼容