css横线制作教程

使用 border 属性制作横线

通过 border 属性可以快速创建横线。设置元素的 border-top 或 border-bottom 为所需样式，调整颜色、粗细和样式即可。

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

使用 hr 标签制作横线

HTML 的 <hr> 标签默认生成一条横线，可通过 CSS 自定义样式。

hr {
  height: 2px;
  background-color: #333;
  border: none;
}

使用伪元素制作横线

通过 ::before 或 ::after 伪元素生成横线，适合需要灵活控制位置的场景。

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

使用线性渐变制作横线

利用 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 rgba(0, 0, 0, 0.1);
}

横线的样式调整

可以通过以下属性调整横线的样式：

• width：控制横线宽度
• height 或 border-width：控制横线粗细
• color 或 background-color：控制横线颜色
• margin 和 padding：控制横线位置

.custom-line {
  width: 80%;
  height: 3px;
  background-color: red;
  margin: 20px auto;
}