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

Question

我有一个 html（带引导程序）和一个 CSS，在我的 html 中，我有一个<hr>标签，其中有一个 class，然后在我的 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; }

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