如何在HTML中画一条小线

在HTML中，我们可以使用<hr>标签来插入一条水平线，下面是<hr>标签的语法：

<hr>

这条线会默认展示为一条水平实线，如下所示：

如果需要自定义线的样式，可以使用CSS来实现。

使用CSS画一条小线

实线

HTML：

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

CSS：

.line {
  border-top: 1px solid #000;
}

效果：

虚线

HTML：

<div class="line dash"></div>

CSS：

.line.dash {
  border-top: 1px dashed #000;
}

效果：

点线

HTML：

<div class="line dot"></div>

CSS：

.line.dot {
  border-top: 1px dotted #000;
}

效果：

自定义

如果以上线的样式都不能满足需求，可以使用border-image属性，实现任意线的样式。

HTML：

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

CSS：

.line.custom {
  border-top: 10px solid transparent;
  border-image: linear-gradient(to right, #f00, yellow, green) 1;
}

效果：

总结

以上是在HTML中画一条小线的几种方法，通过CSS的样式调整，可以实现不同的线条效果。