替代水平规则标签`<hr>`在html5中工作

Question

我目前正在制作一些日历的html(在html5中),我正在尝试添加彩色水平线.我一直在使用水平规则标签,<hr>但我很难让大多数属性工作.

这就是我要的:

<hr color="purple" align="left" width="120%" size="6">

我读到有些属性在html5中不起作用......唯一有效的是宽度标记.其他人都没有做任何事情!

我怎样才能让它发挥作用？有没有更好的方法来解决这个问题？

Answer 1

使用CSS规则

hr.someClass {
  background-color: purple;
  width: 120%;
  height: 12px;
  border-top: 1px solid black
}

<hr class="someClass">

Answer 2

您可以添加带有的div border-top，如下所示：

<div style="border-top: 6px solid purple"></div>

使用外部样式（总是更好）：

.horizontal-rule {
  border-top: 6px solid purple;
}

<div class="horizontal-rule"></div>