css制作横线

使用 border 属性

在元素底部添加 border 可以创建一条横线。通过调整 border 的宽度、样式和颜色来自定义横线外观。

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

使用 hr 标签

HTML 的 <hr> 标签专门用于创建水平分割线。可以通过 CSS 对其进行样式调整。

hr {
  height: 1px;
  background-color: #000;
  border: none;
}

使用伪元素

使用 ::before 或 ::after 伪元素创建横线，这种方法更灵活，可以精确控制横线的位置和样式。

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  margin-top: 10px;
}

使用 linear-gradient 背景

通过 CSS 的 linear-gradient 函数创建横线，这种方法适合需要复杂背景的情况。

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

使用 box-shadow

利用 box-shadow 属性创建横线，这种方法可以创建带有阴影效果的横线。

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