首页 > 技术文章 > 画一条0.5px的线

embrace-ly 2019-04-02 21:16 原文

通过伪类元素:after为其添加样式,用transform:scaleY令其在垂直方向缩小0.5倍

.div:after{
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  background: red;
}

推荐阅读