Bootstrap 5 的 .carousel-indicators 小圆点默认由 [data-bs-target] 按钮通过 border-radius: 50% 实现，改为方形需覆盖其 border-radius（如 4px 或 0）、并显式设置一致的 width 和 height（建议 ≥12px），同时用 [aria-current="true"] 精准控制选中态样式。
Carousel小圆点默认样式在哪定义的
Bootstrap 5 的 .carousel-indicators 默认用 ::before 伪元素 + border-radius: 50% 画圆点，本质是 li 里套 button，每个 button 宽高相等、背景色+圆角。改方形只需干掉圆角，但得确保宽高一致且有足够点击区域。
关键不是加新类，而是覆盖原生 CSS 的 border-radius 和可能的 width/height 计算逻辑。
直接覆盖 indicator button 的 border-radius
最简方式是在项目 CSS 中追加：
.carousel-indicators [data-bs-target] {
border-radius: 4px;
width: 12px;
height: 12px;
}
注意三点：
-
data-bs-target是 Bootstrap 5 里指示器button的属性选择器，比单纯写.carousel-indicators button更精准，避免被其他组件干扰 -
border-radius: 4px是「略带圆角的方形」，如果要纯直角，写0；但建议留 2–4px，防 iOS 点击反馈太硬 - 必须显式设
width和height，否则某些主题下会继承父级缩放或 font-size 导致变形
为什么加了样式没生效 常见失效原因：
• 没加 !important？别急着加——先检查 CSS 加载顺序，Bootstrap 的 CSS 必须在你自定义样式之前引入
• 用了 Bootstrap 4？那选择器是 .carousel-indicators li button，不是 [data-bs-target]，版本错就完全不匹配
• 自定义 CSS 被 scoped 或 Shadow DOM 隔离（比如 Vue 单文件组件没开 deep）
• 浏览器缓存旧 CSS，尤其开发时改完没硬刷（Ctrl+Shift+R）
想让方块带选中态颜色变化
Bootstrap 默认只改 background-color，但选中态（active）的 button 有 aria-current="true" 属性，可用：
.carousel-indicators [data-bs-target][aria-current="true"] {
background-color: #0d6efd;
width: 16px;
}
注意：
- 不要用
.active类——Bootstrap 5 已弃用该类，全靠aria-current - 如果同时改尺寸，建议 active 态略大（如 16px），普通态 12px，视觉反馈更清晰
- 深色背景上记得同步调
opacity或对比度，否则浅灰方块几乎看不见
width/height 设得太小，12px 是底线，再小拇指点不准。 
