[分享]CSS两条不同的线条重合横线

当我们需要在网页中添加一条重合横线时，可以使用CSS的伪元素来实现。接下来介绍两种不同的方法：// 方法一：使用双重边框实现 p { border: 1px solid 000; borderbott...

当我们需要在网页中添加一条重合横线时，可以使用CSS的伪元素来实现。接下来介绍两种不同的方法：

// 方法一：使用双重边框实现
p {
  border: 1px solid #000;
  border-bottom: none;
  position: relative;
  padding-bottom: 10px;
}

p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #000;
  z-index: -1;
} 

以上代码中，我们给p标签设置了一个实线边框，并且将底边框取消掉。接着使用伪元素::after来添加一个位于p标签下面的1像素实线边框，并使用z-index将其放在下层。

// 方法二：使用线性渐变实现
p {
  position: relative;
  padding-bottom: 10px;
  background: linear-gradient(to bottom, #000 0%, #000 100%);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
} 

以上代码中，我们在p标签上使用了线性渐变的背景来实现重合横线。通过将渐变方向设置为从顶部到底部，然后使用background-size和background-position控制渐变的起点和终点位置，最后使用background-repeat来禁用重复，使渐变只呈现一次。

以上两种方法都可以很好地实现重合横线效果，具体使用哪个方法可根据具体需求情况而定。