根本原因是默认浅灰细边框+浏览器特殊渲染，改opacity会误虚化整个元素；应重置border-top样式或用rgba()控制边框颜色透明度。
Bootstrap 水平线（<hr>）颜色看起来“很淡”，根本原因不是它自带 opacity，而是默认用了极细的浅灰边框 + 浏览器对 <hr> 的特殊渲染逻辑——你直接设 opacity: 0.5 反而会让整条线（含可能存在的阴影、伪元素）一起变淡，偏离本意。
为什么改 opacity 是错的方向
给 <hr> 加 opacity 会作用于整个元素盒模型：如果它有 border、box-shadow、甚至某些主题里注入的 ::before，全都会被降级。这不是“调线的颜色”，是“把线连同它的容器一起虚化”。更糟的是，<hr> 默认没有显式设置 background 或 color，所以 opacity 实际影响的是它的边框（border-top）——而这个边框本身就很细（1px）、很浅（如 #dee2e6），再叠一层透明度，自然显得发灰、无力。
- 别写
<hr style="opacity: 0.7">—— 这是视觉污染，不是精准控色 - Bootstrap 本身不给
<hr>设opacity，所有“淡”都来自原始border-color的明度和粗细 - 真正要改的是颜色值本身和边框样式，不是透明度层级
正确改颜色：重置 border 而非碰 opacity
标准解法是清空默认边框，用 border-top 显式定义粗细、样式、颜色：
hr {
border: none;
border-top: 2px solid #0d6efd; /* 粗一点、实一点、主色一点 */
}
-
border: none必须写在前，否则border-top可能被复合边框覆盖 - 把
2px换成1.5px或3px可微调视觉重量，比调opacity更可控 - 颜色推荐用 Bootstrap 的 CSS 变量，比如
var(--bs-primary)，方便主题同步
需要“半透感”时，用 rgba() 替代 opacity
如果你真想要一条带透明度的分隔线（比如浮层下透出背景），应该控制边框自身的 alpha，而不是整条线的 opacity：
hr {
border: none;
border-top: 2px solid rgba(13, 110, 237, 0.3); /* 颜色+透明度一体 */
}
-
rgba(13, 110, 237, 0.3)是#0d6efd的 30% 透明版本，只影响边框，不影响其他潜在渲染层 - 这样改完，即使后续加了
box-shadow或伪元素，也不会被意外弱化 - 注意不要和
bg-transparent类混用：<hr class="bg-transparent">没意义——<hr>本来就没有背景色
响应式或动态场景下容易漏掉的点
如果 <hr> 在折叠菜单、模态框、或 JS 动态插入的区域里变淡，大概率不是样式问题，而是父容器设置了 opacity 或 filter: alpha()——这种继承式透明会穿透到所有子元素，包括 <hr>。此时检查上层元素的 computed styles，重点看 opacity 和 filter 是否非 1。
- 用浏览器开发者工具的 “Computed” 面板，逐级往上查
opacity值 - 避免在布局容器上滥用
opacity；真要弱化内容，优先用color: rgba()或背景色降 alpha - Bootstrap 的
.fade类也会间接影响<hr>，若它在.modal.fade内，就得单独重置hr的opacity
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
