css 高频面试题：
如何实现0.5px 的边框
其实设置border为0.5px 是不可以的，有些浏览器会把他渲染成1px 。
下面介绍几种实现0.5px 边框的方法

一、单边框

1、border+border-image+linear-gradient的方式

  <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的方式

 <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%);
    }

3、定位+伪元素+transfrom缩放(scale)的方式

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

 .border {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        position: relative;
    }