Mengapa teg jam saya lut sinar apabila ia ditetapkan kepada warna putih pepejal?

Question

Saya mempunyai html (dengan bootstrap) dan css, dalam html saya, saya mempunyai tag <hr> yang mempunyai kelas dan kemudian dalam css saya, saya mempunyai gaya sempadan untuknya. Ia lut sinar dan anda boleh melihat warna putih, tetapi ia tidak "pepejal". Saya harap ia benar-benar pepejal dan tidak pucat seperti yang saya sangka.

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

Ia kelihatan seperti ini:

Sejujurnya, saya cuba menggayakannya dengan bahagian atas sempadan, warna, segala-galanya, tetapi tiada apa yang berhasil.

Beginilah rupa yang saya mahukan:

Answer 1

Dalam versi but yang lebih baharu terdapat kelas/peraturan "peraturan menegak" khas dengan sedikit ketelusan.

Untuk mengelakkan perkara ini, tambahkan opacity: 1.0; pada peraturan CSS anda.

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