不使用<hr>标签创建水平线的方法及细线显示异常问题问询

1. 不使用<hr>标签创建水平线的常用方法 #

其实不用<hr>的话，有很多CSS方案可以实现，这里给你几种简单好用的：

• 边框法：给元素加顶部或底部边框，这是最直接的方式

  .horizontal-line {
    border-top: 1px solid #9E9E9E;
    /* 可以去掉默认的内外边距，避免多余空间 */
    margin: 1rem 0;
    padding: 0;
  }
  

• 伪元素法：用:after或:before伪元素生成线条，不占用额外HTML元素

  .section-divider {
    position: relative;
    margin: 1rem 0;
  }
  .section-divider::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #9E9E9E;
  }
  

• 背景渐变法：可以做渐变效果的水平线，比如两边透明中间实色

  .gradient-line {
    height: 1px;
    background: linear-gradient(to right, rgba(158,158,158,0), rgba(158,158,158,1), rgba(158,158,158,0));
  }
  

2. 如何实现更细的水平线（解决0.5px边框不生效的问题） #

你提到把边框改成0.5px没效果，这是因为大多数浏览器的渲染引擎不支持小于1px的物理像素边框，会自动把0.5px向上取整为1px。给你几个可行的替代方案：

方案一：单边框 + 透明度调整 #

用1px边框，通过降低透明度来模拟更细的视觉效果，简单易上手：

.thin-line {
  border-top: 1px solid #9E9E9E;
  opacity: 0.5;
}

方案二：伪元素 + 缩放变换 #

用伪元素生成1px的线条，再通过transform: scaleY(0.5)垂直缩放一半，这样视觉上就是0.5px的粗细，兼容性更好：

.thin-line {
  position: relative;
  margin: 1rem 0;
}
.thin-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #9E9E9E;
  transform: scaleY(0.5);
  /* 确保缩放从顶部开始，避免位置偏移 */
  transform-origin: center top;
}

方案三：使用box-shadow模拟细线条 #

利用阴影的模糊半径为0，把阴影大小设为0.5px，不过这个兼容性不如缩放方案，但也是一种思路：

.thin-line {
  height: 0;
  box-shadow: 0 0.5px 0 #9E9E9E;
}

这些方案都能实现比1px更细腻的水平线效果，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Bug