1. 下附代码
CSS部分
.top {position: relative;}
.border-line::after{
content:'';
/* position: absolute; */
width: 100%;
height: 1px;
background-color: #000;
/* 如果不用 background-color, 使用 border-top:1px solid #979797; 效果是一样的*/
transform: scaleY(0.5);
}
HTML部分
<div class="top border-line"></div>
实现0.5px边框的办法主要就是用css生成一个伪元素,制定好基本样式后,使用transform:scaleY(0.5),将Y轴缩小至原来的0.5倍来达到一个0.5px的效果。