css 半像素

  项目中需要用到 0.5px 的边框时，我们不能通过直接设置 border 为 0.5px ，这时候就需要 css3 的缩放来变通。

    /* 定义目标元素的定位方式 */
    .thinner,.thinner-top,.thinner-all{
      position: relative;
    }
    /* 定义在底部的 border */
    .thinner:after{
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left:0;
      right: 0;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #dedede; 
      transform-origin: 0 0;
      transform: scale(1, 0.5);
    }
    /* 定义在顶部的 border */
    .thinner-top:before{
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left:0;
      right: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #dedede; 
      transform-origin: 0 0;
      transform: scale(1, 0.5);
    }
    /* 定义包裹的 border */
    .thinner-all:before{
      content: '';
      display: block;
      position: absolute;
      width: 200%;
      height: 200%;
      border: 1px solid #dedede; 
      transform-origin: 0 0;
      transform: scale(0.5, 0.5);
      z-index: -1;
    }

使用如下：

<div class="container">
  <div class='thinner'>
    <p>文本000</p>
  </div>
  <br>
  <br>
  <div class='thinner-top'>
    <p>文本111</p>
  </div>
  <br>
  <br>
  <div class='thinner-all'>
    <p>文本222</p>
  </div>
</div>