1px问题解决方案

方案一：使用background-image

             

优点:

可以设置单条,多条边框

可以设置颜色

缺点:

大量使用渐变可能导致性能瓶颈

代码量大

多背景图片有兼容性问题

< body>
          < div class= "bt" ></div >
          < div class= "box" ></div >
          < div class= "bt" ></div >
          < div class= "pox" ></div >
     </ body >

< style type = "text/css">
           * {padding : 0 ; margin: 0; }
               div {
                    margin-top : 10 px;
                    width : 100 %;
                    height : 100 px;
                    overflow : hidden ;
                    -webkit-box-sizing : border-box ; //应该可以删除
               }
               /*单条线*/
               .bt {
                    height: 1px;    /*写了1px的话，此div就只是一条边*/
                    background-image : -webkit-linear-gradient( top ,transparent , #000) ;
                    background-repeat : no-repeat ;
                    background-position : top left ;
                    background-size : 100 % 1 px;
               }
              
               /*多条线*/
               .pox {

                    background-image : -webkit-linear-gradient( top ,transparent , #000) , -webkit-linear-gradient( right ,transparent , #000) , -webkit-linear-gradient( bottom ,transparent , #000) , -webkit-linear-gradient( left ,transparent ,#000);
                    background-repeat : no-repeat ,no-repeat , no-repeat, no-repeat ;
                    background-position : top left , top right ,bottom left, top left ;
                    background-size : 100 % 1 px, 1 px 100 %, 100 % 1 px, 1 px 100 %;
               }
           </ style>

方案二：使用scaleY和:after、:before

      

缺点：

圆角无法实现，实现4条边框比较麻烦，并且只能单独实现，如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。

比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。

 < body>
          < div class= "box" ></div >
          < div class= "bt" ></div >
          < div class= "pox" ></div >
     </ body >
     < style type = "text/css">
           * {padding : 0 ; margin: 0; }
               div {
                    width : 100 %;
                    height : 100 px;
                    overflow : hidden ;
               }
               .box {
                    position : relative ;
               }
               .box :before {
                    position : absolute ;
                    content : "" ;
                    top : 0 ;
                    left : 0 ;
                    width : 100 %;
                    height : 1 px;
                    background-color : #000 ;
                      -webkit-transform : scaleY ( 0.5) ;
                    transform : scaleY ( 0.5) ;
                    -webkit-transform-origin : 0 0 ;
                    transform-origin : 0 0 ;
               }
               .box :after {
                    position : absolute ;
                    content : "" ;
                    bottom : 0 ;
                    left : 0 ;
                    width : 100 %;
                    height : 1 px;
                    background-color : #000 ;
                    -webkit-transform : scaleY ( 0.5) ;
                    transform : scaleY ( 0.5) ;
                    -webkit-transform-origin : 0 0 ;
                    transform-origin : 0 0 ;
               }
           </ style>