Bootstrap卡片边框粗细无法通过.border-2等工具类直接生效，因.card自带高权重border:1px solid声明；必须用!important显式覆盖border-width，且仅改宽度以保留color变量与响应式适配。
卡片边框粗细不能靠 .border-2 一类工具类直接生效
bootstrap 的 .card 类自带固定 border-width: 1px，且该声明权重高、无内置工具类覆盖入口。你加 class="card border-2" 不会变粗——border-2 只设宽度，但 .card 的原始边框规则（含 border-style 和 border-color）会把它压住，工具类根本进不去。
必须用自定义 CSS 覆盖 border-width
最稳的写法是显式重写，确保选择器权重足够：
-
.card { border-width: 2px !important; }—— 全局统一加粗，简单直接 -
.card.card-thick { border-width: 3px !important; }—— 按需启用，HTML 里写class="card card-thick" - 只改某一边？用
border-top-width等单独属性，避免影响圆角或阴影渲染
⚠️ 注意：!important 在这里是必要的，不是坏习惯——因为 .card 的原始规则是 .card { border: 1px solid var(--bs-border-color); }，单靠类名无法胜出。
别用 border: 2px solid ... 全写
这样会覆盖掉 .card 原有的 border-color 动态变量（比如深色模式下的自动适配），也容易和 :hover 或 .card-img-top 的边框行为冲突。只动 border-width，保留 border-style 和 border-color 原始声明，才是安全做法。
响应式或高 DPI 场景要手动干预
2px 在手机小屏上可能太抢眼，在 Windows 缩放 125% 下又可能被拉伸得模糊。如果真有跨端需求：
- 放弃像素值，改用
border-width: 0.125rem（≈2px，但随根字体缩放） - 配合媒体查询：
@media (max-width: 768px) { .card { border-width: 1px; } } - 移动端 1px 物理像素问题？别指望
border-1，得用伪元素 +transform: scaleY(0.5)方案，且必须给父容器加position: relative
真正容易被忽略的是：加粗边框会让卡片整体尺寸变大（上下左右各+粗细值），在 .card-group 或栅格紧凑布局里，可能触发换行或内容挤压——调完粗细，务必检查实际 DOM 尺寸和溢出表现。
