改箭头大小需同步调 width、height 和 background-size；svg 图标不响应 font-size；透明度应通过 background-color 和 css 变量控制，禁用 opacity；移动端需单独写 :hover 样式；确保 position: relative 和 overflow: visible。
改箭头大小必须同步调 width、height 和 background-size
Bootstrap 5 的箭头是 SVG 背景图，不是文字，所以改 font-size 完全无效。图标实际尺寸由容器尺寸和背景图缩放共同决定。
-
.carousel-control-prev-icon, .carousel-control-next-icon必须同时设置width和height（如2rem），否则背景图会被拉伸或裁剪 -
background-size: 100%让 SVG 填满容器；若想留白边，用background-size: 80% - 如果放大后图标模糊，说明原始 SVG 分辨率不够——要么换高清 SVG，要么改用 Font Awesome 图标（需确保字体已加载）
-
.carousel-control-prev容器本身也要有足够padding（至少0.5rem），否则点击热区没跟着变大
调透明度别碰 opacity，改 background-color 和 --bs-carousel-control-color
直接给 .carousel-control-prev 加 opacity: 0.6 是最常见错误：它会让 SVG 图标发灰、hover 缩放失真、iOS Safari 点击反馈变弱，甚至导致图标在某些缩放下不可见。
- 默认“半透”效果来自两层：
background-image（左右渐变遮罩）和background-color（按钮底色） - 删掉遮罩：加
.carousel-control-prev, .carousel-control-next { background-image: none; } - 控制按钮本体透出程度：用
background-color: rgba(0, 0, 0, 0.15);，alpha 值调轻重感 - 改图标颜色：覆盖变量
::root { --bs-carousel-control-color: rgba(255, 255, 255, 0.9); }，比写color更可靠
移动端 hover 失效？得单独写 :hover 状态
触摸设备没有 hover，但用户点按后常期望有即时视觉反馈。靠 opacity 过渡在这里完全失效，因为 iOS Safari 不触发 :hover，且动画会干扰点击判定。
- 必须为
.carousel-control-prev:hover单独写样式，比如background-color: rgba(0, 0, 0, 0.3); - 避免用
transition: opacity .2s—— 它在 touch 设备上不生效，PC 上又可能和 focus 状态冲突 - 如果用了
<button></button>标签，务必加type="button"，否则表单提交会中断事件流
箭头不显示？先查 position: relative 和 overflow: hidden
即使 CSS 改对了，箭头仍可能“隐身”——不是没渲染，而是被裁剪或定位错位。
- 轮播容器（即
<div class="carousel">）必须有 <code>position: relative，否则.carousel-control-*的绝对定位会脱标到body上 - 检查父容器是否设了
overflow: hidden，尤其常见于 banner 区域，会把伸出边界的箭头直接切掉 - 用开发者工具选中
.carousel-control-prev，看 computed 样式里display是否为block、opacity是否为1、visibility是否为visible - 自定义图标时别漏掉
background-size：默认图标尺寸是1rem × 1rem，建议显式设置以避免变形
真正麻烦的不是改样式，而是当多个轮播图共存时，
data-bs-target 和 id 的匹配稍有偏差，整个箭头逻辑就静默失效——这种问题往往要花十分钟排查，却只差一个字符。
