如何更改<hr>标签的粗细和颜色？

Question

我看到这个问题已经有了答案，但我尝试了所有解决方案，仍然只有一个几乎看不见的分隔线。

我做错了什么？

hr {
    background-color: dimgrey;
    color: dimgrey;
    border: solid 2px dimgrey;
    height: 5px;
    width: 1000px;
}

- Jamie Bohanna

---

你的样式被覆盖了吗？（例如Bootstrap） - Stefan Neuenschwander

Please include an example. - eclipsis

Answer 1

不确定您认为什么是“几乎看不见”的，但5像素的高度相当明显。 :)

请确保在其他可能覆盖此规则的CSS之后定义此CSS。

或者，使用!important使此规则具有优先权：

hr {
    background-color: dimgrey !important;
    color: dimgrey !important;
    border: solid 2px dimgrey !important;
    height: 5px !important;
    width: 1000px !important;
}

另一种方法是为此样式定义一个自定义类：

.bigHr {
    background-color: dimgrey !important;
    color: dimgrey !important;
    border: solid 2px dimgrey !important;
    height: 5px !important;
    width: 1000px !important;
}

...然后在需要应用这种样式时使用该类：

<hr class="bigHr">

- mmccaff

---

谢谢，是Bootstrap框架覆盖了样式！ - Jamie Bohanna

谢谢，这正是我想要的。 - GoutamS

有没有可用于增加 <hr /> 标签粗细的 Bootstrap 4 类？ - Vikrant Bhat