css横线制作教程

使用 border 属性制作横线

通过设置元素的 border-top 或 border-bottom 属性可以快速生成横线。例如：

.hr-border {
  border-top: 1px solid #000;
  margin: 10px 0;
}

使用 hr 标签默认样式

HTML 原生 <hr> 标签默认显示为横线，可通过 CSS 增强样式：

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

渐变横线效果

使用 linear-gradient 创建渐变色横线：

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

虚线横线样式

通过 border-style 实现虚线效果：

.hr-dashed {
  border-top: 1px dashed #999;
}

自定义图案横线

用 background-image 引入 SVG 或 PNG 图案：

.hr-pattern {
  height: 10px;
  background: url('data:image/svg+xml;utf8,<svg...>') repeat-x;
}

阴影效果横线

添加 box-shadow 增强立体感：

.hr-shadow {
  height: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

动画横线

结合 CSS 动画实现动态效果：

@keyframes underline {
  from { width: 0; }
  to { width: 100%; }
}
.hr-animate {
  height: 2px;
  background: blue;
  animation: underline 1s ease-out;
}