[筆記] 純 CSS Blur 創造模糊效果 Posted on2024-07-222024-07-02AuthorANDY LIEN 章節連結 內容 程式碼 近期在製作模糊效果時,想說在 2024 的現在可否使用純 CSS 來製作,不用使用 svg。透過 caniuse 的相容性統計,iOS Safari, Google Chrome, Firefox … 等都支援,程度超過 97% 。因此就大方的使用吧。 內容 根據 CaniUse 的統計結果如下: 語法上並沒有很困難,就是直接在圖片 <img> 標籤,下 style=”{ filter: blur(<?px>)}” 即可 程式碼 按讚加入粉絲團延伸閱讀 [筆記] Vite Plugin 生產正式環境下 過濾 Public 資料夾 [筆記] Vueform Vue3 Multiselect 封裝 [筆記] Promise.allSettled TypeScript 和批次 Batch 發送寫法 [筆記] HTML Vue3 Click Outside 實作與誤區 [筆記] 讓 SVG 得以自適應寬高縮訪放的方法