可通过添加自定义类（如.my-card）并用更高特异性选择器覆盖，推荐使用!important确保生效；或通过sass变量重定义$card-border-radius和$card-box-shadow批量修改。

如何覆盖Bootstrap 4默认的.card圆角和阴影样式

Bootstrap 4 的 .card 默认使用 border-radius: 0.25rem 和 box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075)。直接在 HTML 中加 style 行内样式可行，但不推荐——它会被 Bootstrap 的 CSS 优先级压制，除非加 !important（不推荐滥用）。更稳妥的方式是用自定义类名 + 更高特异性选择器。

实操建议：

• 给卡片添加自定义类，比如 <div class="card my-card"> <li>在自己的 CSS 文件（或 <code><style></style> 块）中写：

  .my-card {
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
  }

• 若只改某一张卡，可用 ID： #special-card { border-radius: 0; }，但注意 ID 不可复用

为什么!important有时绕不开

Bootstrap 4 的 .card 样式来自 bootstrap.css，其选择器是单类名 .card，权重为 10。如果你只写 .my-card，权重也是 10，后加载的 CSS 才会生效；但若你用的是 CDN 或构建工具（如 Webpack + CSS-loader），加载顺序可能不可控。此时单纯靠顺序不保险。

常见错误现象：

• 写了 .my-card { border-radius: 0; }，但圆角没变——检查浏览器开发者工具，看该规则是否被划掉（即被更高优先级样式覆盖）
• 用了 !important 后阴影消失——可能是 box-shadow 值写错，比如漏了颜色或用了 none 却没重置其他值
• 移动端圆角异常——Bootstrap 4 本身无响应式圆角逻辑，但某些定制主题可能加了媒体查询，需一并覆盖

border-radius 和 box-shadow 参数怎么调才自然

数值不是越大越好。过大的圆角（如 1rem）会让卡片在小尺寸设备上显得臃肿；过强的阴影（如 0 2rem 4rem）容易喧宾夺主，影响文字可读性。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

推荐搭配（兼顾视觉层次与轻量感）：

• 轻量风格：border-radius: 0.375rem（比默认略大），box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08)
• 卡片浮起感：border-radius: 0.5rem，box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.12)
• 完全直角：border-radius: 0，记得同时设 overflow: hidden 防止内部图片/内容溢出圆角残留

用 Sass 变量批量修改（适合项目已用 Bootstrap 源码）

如果你是通过 Sass 编译 Bootstrap（比如用 @import "bootstrap/scss/functions"），最干净的方式是重定义变量再编译：

$card-border-radius: 0.5rem;
$card-box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.12);
@import "bootstrap/scss/bootstrap";

这样所有 .card 实例都会继承新值，无需额外类名。但要注意：此方式要求你控制整个 Bootstrap 构建流程，CDN 用户无法使用。

容易被忽略的一点：Bootstrap 4 的 .card-img-top 和 .card-img-bottom 会自动裁切圆角，如果你改了 border-radius 却没同步调整这些子元素的 border-radius，顶部图片边缘可能露白边或出现像素间隙——需要手动补一句：

.my-card .card-img-top {
  border-radius: inherit;
}