改箭头大小需同时设置.carousel-control-prev-icon的width/height和background-size，而非font-size；透明度应调background-color和--bs-carousel-control-color变量，禁用opacity以免图标变灰、hover失真及移动端点击失效。
改箭头大小别只调 font-size，得动 background-size 和容器尺寸
Bootstrap 5 的箭头图标是 SVG 背景图（.carousel-control-prev-icon 和 .carousel-control-next-icon），不是文字，所以改 font-size 没用。真正控制图标大小的是 background-size 和元素自身的 width/height。
- 必须同时设置
.carousel-control-prev-icon, .carousel-control-next-icon的width和height（如1.5rem），否则背景图会被拉伸或裁剪 -
background-size: 100%保证图标填满容器；设background-size: 80%可留白边，避免贴边 - 如果改大后图标模糊，说明原始 SVG 尺寸不够——此时应换更高分辨率 SVG 或改用 icon font（如 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 值控制轻重感 - 改图标颜色：覆盖 CSS 变量
::root { --bs-carousel-control-color: rgba(255, 255, 255, 0.9); }，比直接写color更可靠
移动端 hover 失效？得单独定义 :hover 状态的 background-color
触摸设备上没有 hover，但用户点按后常期望有即时视觉反馈。靠 opacity 过渡在这里完全失效，因为 iOS Safari 不触发 :hover，且 opacity 动画会干扰点击判定。
- 必须为
.carousel-control-prev:hover单独写样式，比如background-color: rgba(0, 0, 0, 0.3); - 避免用
transition: opacity .2s——它在 touch 设备上不生效，PC 上又可能和 focus 状态冲突 - 如果用了
<button></button>标签，务必加type="button"，否则表单提交会中断事件流 - 检查父容器是否设置了
overflow: hidden，它会把扩大的 hover 区域裁掉，导致“点了没反应”
为什么改了 CSS 还是没变化？优先查这三处
样式不生效往往不是写错了，而是被更高权重规则或结构问题覆盖。调试时先盯住这三点：
-
.carousel容器是否声明了position: relative？没有它，.carousel-control-prev会脱标定位到，样式还在，但位置错乱 - 开发者工具里看
.carousel-control-prev的 computeddisplay是否为block（Bootstrap 5 默认是），如果是none，说明 class 拼错或被其他 CSS 强制隐藏 - 确认引入的是
bootstrap.bundle.min.js（含 Carousel 插件），不是仅bootstrap.min.js——否则data-bs-target绑定失败，整个控制器逻辑不启动，样式再对也点不动
opacity 去操作底层渲染层：SVG 背景图、rgba 底色、CSS 变量和伪元素。任何试图“一键调透明”的做法，都会在移动端或高对比场景下露出破绽。
