直接改 .list-group-item 的 border 需用 !important 覆盖 Bootstrap 默认的分段边框逻辑（.list-group 顶边框 + :not(:last-child) 下边框），否则无效；统一虚线圆角需同时重置 .list-group 顶边框、.list-group-item 四边边框及圆角，并处理 active 状态样式。
直接改 .list-group-item 的 border 就行，但必须覆盖 Bootstrap 的默认权重和重置逻辑，否则无效。
为什么直接写 border: 1px solid red 没反应？
Bootstrap 5+ 默认给 .list-group-item 设了 border-bottom: 1px solid rgba(0,0,0,.125)（仅下边框），且用 :not(:last-child) 控制；顶部边框由 .list-group 自身的 border-top 提供。单纯加 border 会触发浏览器合并——你设的四边边框会被它的局部边框规则覆盖。
实操建议：
- 优先用
.list-group-item的border+!important强制覆盖（简单场景够用） - 更稳妥的方式是同时重置
.list-group的border-top和所有.list-group-item的border-bottom - 若要保留圆角，别忘了同步调整
border-radius，否则新边框会“撑出”直角
想统一改成虚线边框 + 圆角，怎么写 CSS？
这是高频需求，关键在于打破 Bootstrap 的分段边框逻辑，把控制权收回来：
立即学习“前端免费学习笔记（深入）”；
.list-group {
border-top: none; /* 干掉顶部边框 */
}
.list-group-item {
border: 1px dashed #6c757d !important;
border-radius: 8px;
}
/* 可选：去掉 item 之间的间隙（默认有 margin-bottom） */
.list-group-item:not(:last-child) {
margin-bottom: 0;
}注意：!important 在这里不是偷懒，而是因为 Bootstrap 的 CSS 是从 node_modules 注入的，其选择器权重常高于你的自定义样式。不加容易被忽略。
用 Sass 变量批量定制边框颜色和宽度？
如果你用的是 Bootstrap 的 Sass 源码（非 CDN），推荐在 _variables.scss 里改这些变量，一劳永逸：
-
$list-group-border-color→ 控制所有边框颜色 -
$list-group-border-width→ 控制边框粗细（默认.border类也受它影响） -
$list-group-border-radius→ 控制圆角大小
改完重新编译 CSS。好处是不用写额外样式，也不用 !important；坏处是升级 Bootstrap 版本时得重新核对变量名是否变更（比如 v5.3 把 $list-group-border-radius 改成 $list-group-item-border-radius）。
移动端适配时边框变粗或模糊怎么办？
这不是 CSS 写错了，而是高 DPI 屏幕下 1px 边框被渲染为物理 2 像素，视觉变粗。常见于 iOS Safari 和部分安卓浏览器。
解决办法只有两个：
- 用
transform: scaleY(0.5)缩放边框（需配合origin防偏移） - 改用
border: 0.5px solid #6c757d（现代浏览器支持，但 iOS 旧版 Safari 不认）
更实际的做法是：接受它，把边框设为 rgba(0,0,0,0.08) 这类浅色，视觉上比硬生生的 1px 更柔和，也规避了像素对齐问题。
真正麻烦的不是怎么改边框，而是改完后发现 .list-group-item.active 的背景和边框又不协调了——这个状态类自带独立样式，得单独再覆盖一次 border 和 background-color。
