css横线怎么制作

使用 border 属性

在 CSS 中，可以通过为元素添加 border-bottom 或 border-top 属性来创建横线。例如：

.hr-line {
  border-bottom: 1px solid #000;
  width: 100%;
}

这种方法适用于需要自定义横线颜色、粗细和长度的场景。

使用 hr 标签

HTML 提供了 <hr> 标签，专门用于创建水平分隔线。可以通过 CSS 对其进行样式调整：

hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
}

这种方法简单直接，语义化明确。

使用伪元素

通过为元素添加 ::before 或 ::after 伪元素来创建横线：

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #333;
}

这种方法适合在特定元素前后添加横线。

使用线性渐变

可以使用 CSS 的 linear-gradient 函数创建横线效果：

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

这种方法可以创建具有渐变效果的横线。

使用 box-shadow

通过 box-shadow 属性也可以实现横线效果：

.shadow-line {
  height: 1px;
  box-shadow: 0 1px 0 0 #000;
}

这种方法适合需要阴影效果的横线。