Warum ist mein HR-Tag durchscheinend, wenn es auf die einfarbige Farbe Weiß eingestellt ist?

Question

Ich habe ein HTML (mit Bootstrap) und ein CSS, in meinem HTML habe ich ein <hr>-Tag, das eine Klasse hat, und dann habe ich in meinem CSS einen Rahmenstil dafür. Es ist durchscheinend und man kann die weiße Farbe sehen, aber es ist nicht „fest“. Ich wünschte, es wäre völlig fest und nicht blass, wie ich vermutet habe.

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">

Es sieht so aus:

Ehrlich gesagt habe ich versucht, es mit Randoberteilen, Farben und allem zu stylen, aber nichts hat funktioniert.

So soll es aussehen:

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...