当前位置：首页 > CSS

css横线制作教程

2026-04-01 18:08:59CSS

使用 border 属性制作横线

在 CSS 中，可以通过 border 属性快速创建横线。例如，给一个 <div> 元素添加底部边框：

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

使用 `<hr>` 标签并自定义样式

HTML 的 <hr> 标签默认生成一条横线，可以通过 CSS 修改其外观：

hr.custom-line {
  border: 0;
  height: 1px;
  background-color: #333;
  margin: 20px 0;
}

使用伪元素创建横线

通过 ::before 或 ::after 伪元素生成横线，适合在文本或其他元素前后添加分隔线：

css横线制作教程

.heading::after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, #00ff00);
  margin: 10px auto;
}

渐变横线效果

利用 CSS 渐变实现更丰富的横线样式：

.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, #000, transparent);
}

虚线或点状横线

通过 border-style 设置虚线或点状样式：

css横线制作教程

.dashed-line {
  border-top: 2px dashed #ccc;
  width: 80%;
}

阴影增强横线

为横线添加阴影效果以增加立体感：

.shadow-line {
  height: 1px;
  background: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

响应式横线设计

结合媒体查询调整横线宽度或可见性：

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

@media (max-width: 768px) {
  .responsive-line {
    width: 90%;
  }
}

动画横线

通过 CSS 动画让横线具有动态效果：

.animated-line {
  height: 2px;
  background: #000;
  animation: expand 2s infinite;
}

@keyframes expand {
  0% { width: 0; }
  100% { width: 100%; }
}