如何使用HTML和CSS在网页中添加指定样式的线条？

根据你提供的线条样式，这里给出几种实用的实现方法：

方法1：纯CSS渐变实现（简单无冗余元素） #

适合实现中间带空白的水平线条，代码如下：

<div class="gap-line"></div>

.gap-line {
  width: 100%;
  height: 1px;
  /* 渐变参数可调整：前两个百分比控制左侧线条长度，中间两个控制空白宽度，最后两个控制右侧线条 */
  background-image: linear-gradient(to right, #ccc 0%, #ccc 45%, transparent 45%, transparent 55%, #ccc 55%, #ccc 100%);
}

修改45%和55%的数值就能调整中间空白的宽度，数值差越大，空白越宽。

方法2：伪元素实现带文字的分隔线 #

如果需要在线条中间放置文字，用这种方式更灵活：

<div class="line-with-title">示例标题</div>

.line-with-title {
  display: flex;
  align-items: center;
  gap: 15px; /* 文字与线条的间距 */
}
.line-with-title::before,
.line-with-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

左右线条会自动填充容器剩余空间，适配不同宽度的容器。

方法3：背景图片实现复杂线条 #

如果线条样式包含纹理、特殊渐变等CSS难以实现的效果，直接用图片作为背景：

<div class="custom-line"></div>

.custom-line {
  width: 100%;
  height: 2px; /* 匹配你的线条图片高度 */
  background: url('本地或服务器上的线条图片路径') repeat-x center;
  background-size: auto 100%;
}

替换路径为你的线条图片地址即可。

内容的提问来源于stack exchange，提问作者Rohring