为什么我的 hr 标签设置为白色纯色时是半透明的？

Question

我有一个html（带有引导程序）和一个CSS，在我的html中我有一个<hr>标签，它有一个类，然后在我的CSS中我有它的边框样式。它是半透明的，你可以看到白色，但它不是“固体”。我希望它是完全固体的，而不是像我猜的那样苍白。

body { background-color: #1b3b3c !important; color: white !important; }

.hr-left-bold {
  border: 0.2rem solid #fff;
  border-radius: 100rem;
  width: 20rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h3>Kérdés Cím</h3>
<hr class="hr-left-bold">
<p>Nem kéne így hagyni...</p>
<hr class="hr-left-bold">
<img src="./src/upvote.png" alt="like" class="img-fluid vote-img px-1">
<img src="./src/downvote.png" alt="like" class="img-fluid vote-img px-1">

它看起来像这样：

老实说，我尝试使用边框顶部、颜色等所有内容来设计它，但没有任何效果。

这是我想要的样子：

Answer 1

在较新的引导版本中，有特殊的“垂直规则”类/规则，具有一定的透明度。

为避免这种情况，请将 opacity: 1.0; 添加到您的 CSS 规则中。

body {
  background-color: #1b3b3c !important;
  color: white !important;
}

.hr-left-bold {
  border: 0.2rem solid #fff;
  border-radius: 100rem;
  width: 20rem;
  opacity: 1.0;
}

Kérdés Cím

Nem kéne így hagyni...