bootstrap 原生不支持响应式透明度（如 opacity-md-50）和发光（text-shadow）工具类，仅提供 opacity-0 和 opacity-100；实现断点效果须手动编写媒体查询与自定义类，并注意兼容性、性能及 css 层叠逻辑。
Bootstrap 原生不提供任何断点前缀的透明度（opacity-）或发光（text-shadow）类，写 opacity-md-50 或 text-shadow-lg 会完全无效——这些类名在所有 Bootstrap 版本中都不存在。
为什么 opacity-md-* 类根本不起作用
Bootstrap 5 只保留了 opacity-0 和 opacity-100 两个静态工具类，中间值（如 opacity-25）已被移除；更关键的是，它**从未实现过响应式透明度类**——没有 opacity-sm-*、opacity-lg-* 这类变体，CSS 文件里压根没定义它们。
- 浏览器开发者工具里查不到该类名，说明不是“没生效”，而是“被忽略”
- 试图叠加
opacity-0 d-md-block无法解决需求：d-md-block控制显示/隐藏，不是透明度 - CDN 引入的
bootstrap.min.css无法通过 JS 动态注入响应式 opacity 规则，因为工具类是编译时生成的静态 CSS
如何实现「小屏半透、大屏不透」这类效果
必须手动写媒体查询 + 自定义类，不能依赖 Bootstrap 工具类。推荐做法是用语义化类名配合断点规则：
- 定义类如
text-fade-md，而非opacity-md-50（避免误导后续维护者） - 媒体查询范围要严格匹配 Bootstrap 断点值：
@media (min-width: 768px)对应md起点 - 务必加
!important：Bootstrap 的组件内联样式或高权重规则（如.btn）可能覆盖你写的opacity
示例（纯 CSS）：
@media (max-width: 767.98px) {
.text-fade-mobile {
opacity: 0.4 !important;
}
}
@media (min-width: 768px) {
.text-fade-mobile {
opacity: 1 !important;
}
}
怎么给文字加「断点响应式发光」效果
Bootstrap 没有 text-shadow 相关工具类，更无断点变体。直接写 text-shadow: 0 0 8px rgba(0,0,0,0.3) 是静态的；要响应式，就得按断点重设 text-shadow 值。
- 发光强度建议随屏幕增大而增强：小屏用
2px模糊半径防干扰，大屏可用12px突出标题 - 避免用
text-shadow处理正文段落——可读性会显著下降，尤其深色背景+浅色字时 - 如果用了自定义字体（如 Inter），注意某些可变字体轴（
wdth、wght）与text-shadow叠加后渲染异常，建议先在 Chrome/Firefox/Safari 三端验证
示例（适配 md 和 xl 断点）：
.text-glow {
text-shadow: 0 0 2px rgba(0,0,0,0.2);
}
@media (min-width: 768px) {
.text-glow {
text-shadow: 0 0 6px rgba(0,0,0,0.3);
}
}
@media (min-width: 1200px) {
.text-glow {
text-shadow: 0 0 12px rgba(0,0,0,0.4);
}
}
容易被忽略的兼容性和性能点
text-shadow 和多层 opacity 在低端 Android 设备或旧版 Safari 上可能触发强制重绘，导致滚动卡顿；而频繁使用 !important 会让 CSS 层叠逻辑变脆弱——比如某个组件自身设置了 opacity: 0.8 内联样式，你的 !important 规则反而会把它锁死在 0.8，无法被其他状态（如 hover）覆盖。
真正需要响应式视觉控制的地方，优先考虑用 CSS 变量 + :root 媒体查询驱动，而不是堆砌类名或滥用 !important。
