大家有試過用 CSS 達到「景深效果」嗎？
這類效果也可以稱為背景模糊、鏡頭模糊等，基本上就是照片中讓「重點清楚」，其他「不重要的模糊」。
​
作法很簡單，利用 CSS backdrop-filter 的 blur 屬性將照片模糊後，再用 mask 的 radial-gradient 屬性框出重點，就可以達到效果！！！
​
我覺得更有趣的是，大家可以試試看加入動態後，可以呈現假裝鏡頭對焦的效果。光想就覺得很有趣！

網站連結 >>> https://yuanchuan.dev/dreamy-blur