一行CSS實現毛玻璃效果

想要iOS上的那種毛玻璃設計，在百度搜索的前幾排回答，實現效果實在是太複雜，而且不完美。

不完美之處是，百度的回答是將after僞元素設置背景圖片後在虛化，這樣的話不是背景圖片不就虛化不了了嗎？？

還得從蘋果官網上扒

這不就是毛玻璃效果嗎

以上是心路歷程 不廢話了。直接一行代碼

backdrop-filter: saturate(180%) blur(20px);

 

 寫到div裏就能完美遮擋後方實現毛玻璃效果

div{
        box-shadow: 5px 5px 5px rgba(12, 12, 12, 0.527);
        overflow: hidden;
        position: absolute;
        width: 200px;
        height: 200px;
        z-index: 1;
        backdrop-filter: saturate(180%) blur(20px);
	}