直接改.card的border无效是因为被Bootstrap 5默认带!important的边框样式覆盖，应提高选择器优先级、用!important（调试用）、修改Sass变量或CSS自定义属性统一控制。
直接改 .card 的 border 无效？检查是否被 Bootstrap 默认样式覆盖
bootstrap 5 默认给 .card 设了 border: 1px solid var(--bs-border-color)，且这个声明带 !important（在部分主题或编译版本中），单纯写 .card { border: 2px solid red; } 很可能不生效。真正起效的方式是提高 css 优先级或覆盖变量。
- 用更具体的选择器，比如
.my-card.card { border: 2px solid #0d6efd; } - 或者用
!important强制覆盖（不推荐长期用，但调试快）：.card { border: 2px solid #dc3545 !important; } - 若你用 Sass 编译项目，改
$card-border-width和$card-border-color变量更干净
悬停时边框变色总没反应？确认伪类作用对象和层级
常见错误是写成 .card:hover { border-color: #198754; } 却发现没变化——因为默认边框宽度是 1px，颜色虽变了但视觉不明显；更可能是卡片内部元素（如 .card-body）有内边距或背景，让边框“藏”在容器里。
- 确保悬停样式加在最外层
.card上，而不是子元素 - 配合调整边框宽度，例如：
.card:hover { border: 2px solid #198754; } - 如果用了
.shadow-sm等阴影类，阴影会盖住新边框，可加position: relative; z-index: 1;避免遮挡
想统一改全站 Card 边框？别硬写全局 CSS，优先走 Bootstrap 变量体系
硬写 .card { border: ... } 容易和后续升级的 Bootstrap CSS 冲突，尤其当你用 CDN 或未定制构建时。官方推荐路径是接管 CSS 自定义属性（CSS vars）。
- 在
中插入：:root { --bs-card-border-width: 2px; --bs-card-border-color: #6c757d; } - 这样所有
.card会自动继承新值，包括悬停态（除非你另写:hover覆盖） - 注意：该方式在 Bootstrap 5.3+ 更稳定；旧版需确认是否已注入这些 CSS 变量
移动端下边框「消失」或显示异常？检查视口缩放与像素比适配
某些安卓 WebView 或 iOS Safari 在高 DPR 屏幕上，1px 边框会被渲染为 0.5 物理像素，肉眼几乎不可见。这不是代码错，而是设备渲染限制。
- 临时解法：把边框设为
2px，或用transform: scaleY(0.5)模拟 1px（慎用，影响布局） - 更稳妥做法：用
box-shadow替代边框，例如box-shadow: 0 0 0 1px #dee2e6;，它不受像素比干扰 - 别忘了测试真机——模拟器常忽略 DPR 渲染细节
border？先查 computed styles，再动笔。
