改箭头大小必须同时调整 background-size 和容器宽高，而非 font-size；颜色用 --bs-carousel-control-color 变量控制；背景透明度通过 background-color 的 alpha 值调节，禁用 opacity；移动端需单独定义 :hover 反馈。
改箭头大小必须动 background-size 和容器宽高，不是 font-size
Bootstrap 5 的左右切换按钮（.carousel-control-prev-icon 和 .carousel-control-next-icon）用的是 SVG 背景图，不是文字，所以调 font-size 完全无效。真正控制图标显示大小的是两层：容器尺寸（width/height）和背景图缩放（background-size）。
- 必须同时设置
.carousel-control-prev-icon, .carousel-control-next-icon的width和height（例如1.75rem），否则图标会被拉伸或裁剪 -
background-size: 100%让 SVG 填满容器；若想留白边，可用80% - 如果放大后图标模糊，说明原始 SVG 分辨率不够——换更高清 SVG 或改用 Font Awesome 图标更稳妥
- 容器
.carousel-control-prev本身也要有足够padding（至少0.5rem），否则点击热区没跟着变大
调颜色优先用 --bs-carousel-control-color 变量
Bootstrap 5 内置了 CSS 变量统一控制箭头颜色，改 --bs-carousel-control-color 比写一堆选择器更可靠，且自动适配 hover 状态和激活逻辑。
- 全局生效：
:root { --bs-carousel-control-color: #2563eb; } - 仅作用于某个轮播：
#myCarousel { --bs-carousel-control-color: #dc2626; } - 这个变量直接作用于 SVG 的
fill，不用解码 base64 或拼 data URL - 别用
color或fill直接覆盖——它可能被 JS 动态注入的内联样式覆盖
背景显示要改 background-color 和遮罩，别碰 opacity
视觉上的“半透”效果来自两层叠加：SVG 图标 + 底色背景（background-color）+ 左右渐变遮罩（background-image）。直接加 opacity 是最常见错误。
- 删掉默认遮罩：
.carousel-control-prev, .carousel-control-next { background-image: none; } - 调底色透出程度：
background-color: rgba(0, 0, 0, 0.15);，alpha 值控制轻重感 - 图标颜色由
--bs-carousel-control-color控制，底色透明度单独调，互不干扰 - 加
opacity会让 SVG 变灰、hover 缩放失真、iOS Safari 点击反馈弱甚至失效
移动端点击反馈必须单独写 :hover，不能靠 transition
触摸设备没有 hover，但用户点按后需要即时视觉反馈。靠 transition: opacity 在 touch 设备上完全不生效，PC 上还容易和 focus 冲突。
- 必须显式定义：
.carousel-control-prev:hover { background-color: rgba(0, 0, 0, 0.3); } - 确保
.carousel-control-prev有pointer-events: all（Safari 对auto有兼容差异） - 如果用了
<button></button>，务必加type="button"，否则表单提交会中断事件流 - 检查父容器是否设了
overflow: hidden——它会把扩大的按钮裁掉，导致点不中
.carousel-control-prev 的 computed 样式，确认 display 是 block、opacity 是 1、visibility 是 visible，再看 offsetParent 是否正确指向轮播容器。这些细节不验，样式再对也白搭。 
