设置为纯白色实线的hr标签为何呈现半透明效果？

我在使用Bootstrap的HTML和CSS代码时，给<hr>标签添加了自定义类，在CSS中设置了border样式，但这条水平线呈现半透明效果，无法显示完全实心的白色线条。尝试过设置border-top、color等属性都没有效果。

现有代码 #

CSS代码 #

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

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

HTML代码 #

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

效果对比 #

• 当前效果：
• 期望效果：

问题根源是Bootstrap默认给<hr>标签设置了opacity: 0.25的半透明属性，导致你设置的白色边框被淡化。只需要在自定义类中覆盖这个属性，同时避免背景色干扰即可：

修改后的CSS代码 #

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

.hr-left-bold {
  border: 0.2rem solid #fff;
  border-radius: 100rem;
  width: 20rem;
  opacity: 1; /* 强制取消半透明 */
  background-color: transparent; /* 避免背景色影响边框显示 */
}

替代方案（更直接） #

如果不想纠结border的默认样式，也可以直接用高度+背景色的方式实现实心线条：

.hr-left-bold {
  height: 0.4rem; /* 对应原border的总宽度 */
  width: 20rem;
  background-color: #fff;
  border-radius: 100rem;
  border: none; /* 移除默认边框 */
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者pityinmiki