1

在我更改其类属性之前，HR 显示​​得非常好。目的是将基本的黑线更改为不同的颜色和大小。没有错误消息，并且在 Chrome 开发工具中检查后，水平规则正在加载，但未显示。我已经更改了 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>

4

3 回答 3

1

添加一些边框样式：

hr{
  border: 10px solid red;
  border-radius: 3px;
}
于 2021-01-07T19:20:03.643 回答
0

添加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, 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>

于 2021-01-07T19:20:38.197 回答
0

添加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>

于 2021-01-07T19:19:06.477 回答