2018 June 12 0.5px边框

CSS3实现0.5px边框

1.利用渐变把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。

.border-gradient{
    position:relative;
    padding: 10px;
}

.border-gradient:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
}
</style>
</head>
<body>
  <h3>方案一：渐变</h3>
  <div class="border-gradient">
      原理：高度1px,背景渐变，一半有颜色，一半透明。
  </div>
</body>

2.利用缩放原理：transform:scale()来达到压缩一半的目的。

.border-scale{
    position:relative;
    padding: 10px;
}

.border-scale:after{
    content: "  ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #f00;
    /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*/
    -webkit-transform: scaleY(.5);
    transform:scaleY(.5);
}
</style>
</head>
<body>
  <h3>方案二：使用缩放</h3>
  <div class="border-scale">
     原理： 在Y轴方向上，压缩一半。 
  </div>