safari 中 backdrop-filter 需加 -webkit- 前缀且背景不透明才生效；blur 值不能为 0；模糊区域大小比数值更影响性能；文字需增强对比度与描边保障可读性。
backdrop-filter 在 Safari 里不生效？先检查是否加了 -webkit- 前缀
macOS 和 iOS 上的 Safari 直到较新版本才支持 backdrop-filter，而且必须带 -webkit-backdrop-filter 才能触发渲染。只写标准属性等于没写。
- 必须同时声明：
-webkit-backdrop-filter: blur(10px);和backdrop-filter: blur(10px); - 仅加标准写法，在 Safari 15.4 之前会完全失效，DevTools 里也看不到滤镜效果
- blur 值不能为
0px，否则部分旧版 Safari 会当它不存在
rgba 背景色 + backdrop-filter 一起用，为什么还是不透明？
关键不是颜色本身，而是元素是否“有背景”。backdrop-filter 只对「背后的内容」起作用，如果边栏自身背景是 transparent 或没设背景，那就没有东西可模糊——你看到的只是底层页面，不是磨砂效果。
- 必须显式设置背景：比如
background-color: rgba(255, 255, 255, 0.7); - alpha 值别太小（
0.1～0.2），否则底层内容太强，磨砂感被淹没 - 不要依赖父级继承背景，
background必须落在应用backdrop-filter的那个元素上
blur(10px) 性能卡顿？控制范围比调数值更重要
模糊半径大不一定慢，真正拖垮性能的是「被模糊的区域大小」。一个全屏侧边栏 + 大 blur，滚动时 GPU 压力会明显上升，尤其在低端 Mac 或 iPad 上。
- 限制模糊区域：用
overflow: hidden配合固定宽高，避免模糊计算扩散到视口外 - 慎用
blur(20px)以上，iOS Safari 对大于12px的值渲染延迟更明显 - 动画中避免动态改
backdrop-filter值，它无法硬件加速，会导致掉帧
边栏内容文字发虚？别忘了加 color contrast 和 text-shadow 补救
磨砂背景会让浅色文字对比度下降，尤其在模糊+半透叠加下，文字边缘容易“融”进背景里，不是 bug，是光学效果。
- 优先提高文字对比度：深灰（
#333）比纯黑（#000）更耐看，白字配深磨砂时用#fff比#eee更清晰 - 小字号文字建议加微弱描边：
text-shadow: 0 0 1px rgba(0,0,0,0.1); - 别用
font-smooth: auto或-webkit-font-smoothing强行干预，反而可能让虚化更不均匀
磨砂边栏真正的难点不在写法，而在不同设备上对「模糊可见性」和「内容可读性」的平衡——Safari 的前缀、iOS 的性能阈值、Mac 的色彩渲染差异，都会让同一段 CSS 在三台设备上看起来像三个功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
