css一条线两种颜色

CSS是指层叠样式表，是一种用来装饰和格式化网页的语言。其中有一个有趣的特性就是可以用一条线展示两种颜色。

/* 先定义一条线的样式 */
.line {
  height: 1px;
  width: 100%;
}

/* 设置第一种颜色，这里用黑色举例 */
.line:before {
  content: "";
  display: block;
  height: 100%;
  background-color: black;
  border-radius: 5px;
}

/* 设置第二种颜色，这里用灰色举例 */
.line:after {
  content: "";
  display: block;
  height: 100%;
  background-color: gray;
  border-radius: 5px;
  margin-top: -1px;
} 

上述代码中，先定义了一条线的样式，并使用:before和:after伪元素对其进行处理。其中:before表示在元素前插入一个内容，:after表示在元素后插入一个内容。

接着，分别对:before和:after设置不同的背景颜色，从而实现一条线两种颜色的效果。值得注意的是，在:after中设置了margin-top为-1px，以便让灰色部分覆盖黑色部分的上边缘，避免出现缝隙。

最后，在HTML中使用class属性指定元素采用这个样式。

<div class="line"></div> 

即可在页面中展示一条黑色灰色交替的线。