要移除 list-group-item 首尾项圆角，需用高优先级选择器分别重置首项的 border-top-left-radius 和 border-top-right-radius 为 0，末项的 border-bottom-left-radius 和 border-bottom-right-radius 为 0；避免仅设 border-radius: 0 或依赖 .list-group-flush。
如何用 CSS 移除 list-group-item 首尾项的圆角
Bootstrap 5 的 .list-group-item 默认带 border-radius: 0.375rem，且这个圆角是每个 item 独立应用的——导致首项有 top-left/top-right、末项有 bottom-left/bottom-right，中间项则上下都被“削掉”，视觉上不连贯。想让列表看起来像一个整体容器（比如嵌入卡片或表单），就得手动切掉首尾的圆角。
直接写 .list-group-item:first-child { border-top-radius: 0; } 通常无效，因为 Bootstrap 原生规则优先级更高（尤其在使用 .list-group-item-action 时）。
- 用更具体的选择器：
.list-group > .list-group-item:first-child或.list-group-item.list-group-item-action:first-child - 必须显式重置四个方向：
border-top-left-radius: 0;和border-top-right-radius: 0;（首项），border-bottom-left-radius: 0;和border-bottom-right-radius: 0;（末项） - 避免只写
border-radius: 0——它会覆盖所有方向，但可能被后续其他规则干扰；分方向写更可控 - 如果列表是动态渲染（如 Vue/React），确保样式在 DOM 挂载后生效，或加
:not(.disabled)排除禁用项干扰
为什么 .list-group-flush 不够用
.list-group-flush 确实能移除所有边框和圆角，但它是一刀切：不仅去掉首尾圆角，还干掉了所有 border-bottom 和 border-radius，让列表项彻底“贴平”，失去层次感。如果你只想保留中间项的上下分隔线（靠 border-bottom 实现），又不想首尾凸出来，就不能依赖它。
-
.list-group-flush会把.list-group-item的border-radius设为0，同时清空所有border，包括 item 自身的border-bottom: 1px solid rgba(0,0,0,.125) - 它还会重置
margin-bottom，破坏原有垂直节奏 - 若你已用
.list-group-item-action，.list-group-flush对它的影响不可逆，hover 效果可能异常
自定义圆角时容易忽略的兼容点
圆角修改不是孤立操作，它和边框、阴影、伪元素共存。稍不注意就会出现错位或裁剪。
- 当给激活项（
.list-group-item.active）加粗边框（如border: 2px solid #0d6efd）时，即使你清了首项的border-top-left-radius，边框本身仍会“溢出”原始圆角区域——本质是边框绘制逻辑与 border-radius 渲染顺序冲突 - 如果列表外层有
box-shadow（比如放在.card内），首尾圆角被切后，阴影边缘可能显得生硬，需同步调整overflow: hidden或阴影偏移 - 深色模式下，
prefers-color-scheme: dark可能触发不同变量值，建议在媒体查询中复写圆角规则，而非只靠默认主题
用 Sass 变量一劳永逸改圆角（适合工程化项目）
如果你用的是 Bootstrap 源码编译（非 CDN 引入），最干净的方式是改变量，而不是后期覆盖 CSS。Sass 层面控制比 CSS 覆盖更稳定，也避免选择器权重战。
- 关键变量是
$list-group-border-radius（v5.3+），默认值为0.375rem；设为0即全局取消圆角 - 若只想改首尾，需配合自定义 mixin 或重写
.list-group-item的子选择器逻辑——但这已超出变量能力范围，仍需手写 CSS - 修改后重新编译 CSS，确保
node_modules/bootstrap/scss/_variables.scss中该变量未被其他 import 覆盖 - 注意：此方式对
.list-group-flush无影响，它内部硬编码了border-radius: 0，不会读取该变量
border-radius 来源，比盲目加 !important 省一半时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
