优先使用 css 变量 --bs-carousel-control-color 修改箭头颜色，因其同时控制默认、悬停及激活态；尺寸调整需同步设置 width、height 和 background-size；透明度应通过 background-color 的 alpha 值控制，避免使用 opacity。
改箭头颜色优先用 CSS 变量 --bs-carousel-control-color
Bootstrap 5+ 的左右箭头是 SVG 背景图，color 属性无效，直接改文字颜色没用。真正起作用的是根级 CSS 变量 --bs-carousel-control-color，它同时控制默认态、:hover 和激活态的图标填充色。
推荐写法：
:root {
--bs-carousel-control-color: #0d6efd;
}
如果只改某一个轮播图，用更具体的选择器：
#myCarousel {
--bs-carousel-control-color: #dc2626;
}
别漏掉移动端点击反馈：iOS Safari 不触发 :hover，所以单独定义 .carousel-control-prev:hover 的背景色或变量值更稳妥。
调大小必须同步改 width/height 和 background-size
箭头不是字体图标，font-size 完全无效。图标由 .carousel-control-prev-icon 的 background-image 渲染，尺寸由三者共同决定：width、height 和 background-size。
-
width和height设容器尺寸（如1.8rem），决定点击热区范围 -
background-size: 100%让 SVG 填满容器；设80%可留白边，避免贴边 - 如果放大后模糊，说明原始 SVG 分辨率不够——换高清 SVG 或切到 Font Awesome 图标更可靠
示例：
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 1.8rem;
height: 1.8rem;
background-size: 100%;
}
透明度不能碰 opacity，要调 background-color 和遮罩
给 .carousel-control-prev 加 opacity: 0.6 是最常见错误：它会让 SVG 图标发灰、transform: scale() hover 失效、iOS 点击反馈变弱，甚至在缩放时完全不可见。
正确做法分两层控制：
- 删掉默认渐变遮罩：
.carousel-control-prev, .carousel-control-next { background-image: none; } - 调按钮底色透出程度：
background-color: rgba(0, 0, 0, 0.15);（alpha 值控制轻重） - 图标颜色仍走
--bs-carousel-control-color，比如rgba(255, 255, 255, 0.9)
注意：移动端无 :hover，必须为 .carousel-control-prev:hover 单独写 background-color，否则点按无反馈。
容易被忽略的定位和裁剪问题
即使颜色、大小都改了，箭头仍可能“消失”，大概率不是样式没生效，而是被裁剪或脱标：
- 轮播容器（
<div class="carousel">）必须有 <code>position: relative，否则.carousel-control-*的position: absolute会定位到body上 - 父容器若设了
overflow: hidden（尤其 banner 区域），扩大的箭头会被直接切掉 - 检查
.carousel-control-prev的computed样式：display是否为block，visibility是否为visible，opacity是否意外被其他规则覆盖
深色背景图上，光改图标颜色不够——得确保按钮底色和遮罩强度能提供足够对比度，否则用户根本找不到切换入口。
