css横线怎么制作

使用 border 属性制作横线

通过为元素添加下边框实现横线效果，调整 border-bottom 的宽度、样式和颜色即可自定义横线样式。

.horizontal-line {
  border-bottom: 1px solid #000; /* 1px粗的黑色实线 */
  width: 100%; /* 横线宽度 */
}

使用 <hr> 标签

HTML 原生标签 <hr> 默认生成一条横线，可通过 CSS 修改其样式。

hr {
  height: 2px; /* 横线高度 */
  background-color: #ccc; /* 颜色 */
  border: none; /* 去除默认边框 */
}

使用伪元素 ::after 或 ::before

通过伪元素在指定元素前后插入横线，适合需要精确控制位置的场景。

.element::after {
  content: "";
  display: block;
  width: 50%;
  margin: 10px auto; /* 居中 */
  border-top: 1px dashed #333; /* 虚线样式 */
}

使用 linear-gradient 背景

通过背景渐变生成横线，适合复杂设计需求（如渐变颜色横线）。

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

使用 box-shadow 属性

通过投影效果模拟横线，适合需要阴影或特殊效果的场景。

.shadow-line {
  height: 1px;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); /* 浅色阴影横线 */
}

注意事项

• 横线宽度可通过 width 或父容器控制。
• 虚线样式需使用 border-style: dashed/dotted。
• 响应式设计中建议使用相对单位（如 vw 或 %）。