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

Question

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

我做错了什么？

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

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;
}

另一种方法是为这种风格定义自定义class：

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

...然后在需要此样式时使用 class：

<hr class="bigHr">

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

How to change the thickness & colour of the <hr> tag?

html

css

colors

thickness