[筆記] 純 CSS Blur 創造模糊效果

近期在製作模糊效果時，想說在 2024 的現在可否使用純 CSS 來製作，不用使用 svg。透過 caniuse 的相容性統計，iOS Safari, Google Chrome, Firefox … 等都支援，程度超過 97% 。因此就大方的使用吧。

---

內容

根據 CaniUse 的統計結果如下：

語法上並沒有很困難，就是直接在圖片 <img> 標籤，下 style=”{ filter: blur(<?px>)}” 即可

---

程式碼

按讚加入粉絲團

延伸閱讀

• [筆記] PrimeVue 與 vue-i18n 同步更新語系
• [筆記] Chart.js 新增自定義的 Tooltip
• [指南] 評估 AI 輔助開發程式所需花費計算
• [筆記] 打造支援遠端搜尋與鍵盤導航 Multi-Select 下拉選單元件 Vue3 + Tailwindcss
• [筆記] Nuxt 4.2 版本於開發環境出現 TypeScript Check 錯誤