阴影必须直接写在.alert根元素上并用!important确保优先级，背景用rgba(255,255,255,0.92)配合backdrop-filter:blur(6px)和-webkit-backdrop-filter，禁用overflow:hidden，统一.btn-close圆角与透明度，小屏降为blur(3px)和rgba(255,255,255,0.95)。
提示框阴影必须直接写在 .alert 上，别用 .shadow-* 工具类
Bootstrap 5 的 .alert 默认没有阴影，.shadow-sm 这类工具类虽然能加影，但只提供单层、固定强度的投影，没法模拟真实景深。你要的是「抬升感」，不是「一层灰边」。
常见错误是把 box-shadow 写在 .alert .alert-heading 或 .alert-dismissible 里——子元素加阴影会被父容器裁掉，或者根本不出现在视觉层。
- 阴影必须加在
.alert根元素上，且优先级要够（必要时加!important） - 别用
all做transition，只过渡box-shadow和background-color，否则悬停时可能意外缩放或抖动 - 移动端慎用垂直偏移 > 4px 的值，小屏下容易让提示框“飘”离文字基线
模糊半透明效果依赖 backdrop-filter + rgba() 背景组合
单独写 backdrop-filter: blur(4px) 在 .alert 上基本没用——因为默认背景是不透明色（如 #fff），背后没内容可模糊。你得让它「透」，同时「稳」。
关键不是调多大模糊值，而是让底层页面内容能被采样到，又不让文字发虚。
- 必须设
background-color: rgba(255, 255, 255, 0.92)这类带 alpha 的值；0.9是安全下限，低于它文字边缘易出现光晕 -
backdrop-filter: blur(6px)要配-webkit-backdrop-filter: blur(6px)，Safari 不加前缀等于没写 - 删掉
.alert或其父容器上的overflow: hidden，否则模糊边缘会被硬切，像贴了层毛边胶带
.alert-dismissible 的关闭按钮会破坏圆角与模糊一致性
Bootstrap 给 .btn-close 单独设了 border-radius: 0.375rem，而 .alert 自身的圆角可能被你改成了 0.5rem，结果关掉按钮后右上角突然“变尖”，模糊区域也跟着错位。
这不是 bug，是样式没对齐。你改了容器，就得同步控件。
- 统一圆角：给
.btn-close加border-radius: inherit !important - 如果用了
backdrop-filter，关按钮本身不能有纯白背景，否则它那块区域会“不模糊”，建议设background-color: rgba(255,255,255,0.8) - 避免给
.btn-close加box-shadow，它太小，加了反而干扰主提示框的景深节奏
响应式模糊强度要降级，别在小屏硬套桌面值
blur(8px) 在桌面看着通透，在 iPhone SE 屏上可能让文字边缘糊成一片，尤其搭配系统字体渲染时。这不是性能问题，是视觉信噪比崩了。
模糊不是越强越好，而是要在「透出背景」和「保持文字锐度」之间找平衡点。
- 桌面端可用
blur(6px)，小屏（max-width: 576px）建议降到blur(3px) - 透明度也要配合调高：小屏下
rgba(255,255,255,0.95)比0.9更稳妥 - 别用 CSS 变量传模糊值然后全局 calc()，Safari 对
backdrop-filter: blur(calc(...))支持不稳定，老版本直接失效
.alert 外层或 body 上误加 overflow: hidden——这个细节一漏，整个毛玻璃就变成一块磨砂玻璃，而且很难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
