实现HC中制作0.5px的边框

通常使用两种方法,适合做上下边框,侧边框则会变得十分麻烦,不建议使用

 

1.border + border-image + linear-gradient 方法

使用线性渐变遮住0.5px大小的边界

<div class="border"></div>

  .border{
        width:200px;
        height: 200px;
        background-color: red;
        margin: 0 auto ;
        border-bottom:  1px solid blue;
        border-image: linear-gradient( to bottom,transparent  50%,Green 50%) 0 0 100% 0 ;
    }

 

2.伪元素 + background-image 方法

利用伪元素盖住0.5px的边框

 <div class="border"></div>

 .border { 
　　　　width: 200px; 
　　　　height: 200px; 
　　　　background-color: red; 
　　　　margin: 0 auto;
　　　　position: relative; 
　　} 
 .border:before { 
　　　　content: " "; 
　　　　position: absolute; 
　　　　left: 0; 
　　　　bottom: 0; 
　　　　width: 100px; 
　　　　height: 1px; 
　　　　background-color: blue; 
　　　　background-image: linear-gradient(to bottom transparent 50%, blue 50%); 
　　}