添加 CSS 属性后，水平规则不显示

问题描述

HR 显示​​得非常好，直到我更改了它的类属性。目的是将基本的黑线更改为不同的颜色和大小。没有错误消息，在 Chrome Dev Tools 中检查时，水平线正在加载，但没有显示。我在 Chrome Dev 和我的 IDE 中更改了属性，但没有成功。它应该显示一个粗红色的 HR。

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px red;
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet,mauris sed consectetuer. Etiam et eu.</p>
  </div>

  <hr>

  <div class="class2">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet,mauris sed consectetuer. Etiam et eu,biben</p>
  </div>

解决方法

添加一些边框样式：

hr{
  border: 10px solid red;
  border-radius: 3px;
}

,

将 solid 添加到您的边框：

border: 5px solid red;

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px solid red;
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet,mauris sed consectetuer. Etiam et eu.</p>
  </div>

  <hr>

  <div class="class2">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet,mauris sed consectetuer. Etiam et eu,biben</p>
  </div>

,

添加 solid 属性：

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px solid red; /* solid attributes */
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet,biben</p>
  </div>