css-画一条1px的线

这是一个常见面试问题，有以下几种解决方式

1、使用border属性

border-bottom: 1px solid #999

2、使用height以及背景颜色

height: 1px;
background-color: #666;

3、：：before伪元素

.line {
  position: relative;
}

.line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

4、使用linear-gradient

.line {
  height: 1px;
  background: linear-gradient(to right, #000 100%, transparent 100%);
}