backdrop-filter 屬性掃盲

設計師想要一個毛玻璃效果，我當時聽着一臉懵逼什么是毛玻璃效果，這也太高級了吧，后來她跟我找了一個樣例我看了下，就是那種滑動的時候背景隱隱約約可見的效果，很有意思。不過 CSS 里真的有屬性可以實現這個效果，就是 backdrop-filter 屬性。

用這個屬性實現毛玻璃效果有個前提是：元素背景至少部分透明

  background: rgba(235, 235, 235, 0.88);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);

樣例參考：https://css-tricks.com/almanac/properties/b/backdrop-filter/

兼容性：https://caniuse.com/css-backdrop-filter

有坑的地方：backdrop-filter 會影響position:fixed的布局

與 backdrop-filter 類似的屬性，filter屬性表示讓當前元素自身模糊或者高亮等

好文章：https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/