bootstrap 5 不支持 border-lg-primary 等响应式边框颜色类及边框透明度工具类，需手写媒体查询并显式声明带 !important 的 rgba() 边框色，同时保留基础 border 声明。
Bootstrap 5 不支持 border-lg-primary 这类响应式边框颜色类，也**不支持直接通过工具类控制边框透明度**。想在特定断点下让边框显示指定颜色 + 透明度（比如 rgba(13, 110, 237, 0.3)），必须手写媒体查询，并显式声明 border-color，且需处理优先级和基础边框宽度。
为什么 border-primary + 媒体查询不能直接加透明度
border-primary 只设置 border-color: #0d6efd，它是个纯色值，没有 alpha 通道；你无法用 CSS 类叠加修改它的透明度。即使你在媒体查询里写 border-color: rgba(...)，若没加 !important 或没覆盖原始类权重，就会被 border-primary 覆盖——因为 Bootstrap 的颜色类虽没加 !important，但选择器权重更高（如 .border-primary vs 自定义 .border-lg-primary）。
- 别指望
opacity控制边框透明度：它作用于整个元素，会把内容也变透明 - 别用
background-color: transparent模拟：边框是独立属性，跟背景无关 -
border简写必须存在（如border: 1px solid），否则border-color没宽度可渲染
怎么写才能让 lg 断点下边框是半透蓝色、xs 下是浅灰
必须同时满足三件事：保留基础边框声明、用精确断点媒体查询、显式设 rgba() 颜色并加 !important。推荐在项目 CSS 中补一个可复用的类：
@media (min-width: 992px) {
.border-lg-primary-alpha {
border-color: rgba(13, 110, 237, 0.3) !important;
}
}
@media (max-width: 991.98px) {
.border-lg-primary-alpha {
border-color: rgba(222, 226, 230, 0.7) !important;
}
}
使用时：<div class="border border-lg-primary-alpha">内容</div>
-
border必须保留——它提供默认1px solid宽度和样式，否则border-color不生效 - 断点值严格用
992px和991.98px，避免刚好 992px 宽设备出现双显/双隐 - RGBA 值要手动计算，
border-primary的十六进制色不能直接加 alpha，得转成 rgb 再拼
常见踩坑：加了 !important 还不生效？
往往不是媒体查询写错，而是以下三点之一没做：
- 没加
border或border-1类——border-color依赖边框宽度，没宽度等于没边框 - 用了
border: 0覆盖：它会清掉border-style，后续border-color即使设了也画不出线；该用border: none - CSS 加载顺序错乱：自定义 CSS 必须放在 Bootstrap CSS 之后，否则规则被覆盖
- 如果用了 Sass 构建，确认
$enable-important-utilities是true，否则部分工具类可能不带!important，加剧覆盖问题
真正起作用的永远是那一行 border-color: rgba(...) !important，而不是类名本身。断点只是触发条件，颜色和透明度都得亲手写进去——Bootstrap 不代劳。
