https://benzhub.github.io/tags/%E6%BF%BE%E9%8F%A1/Recent content in 濾鏡 on BenzHubHugozh-TWWed, 19 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/019-filters/Wed, 19 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/019-filters/<blockquote> <p>上一篇替版面點上了「光影」，這一篇替畫面裝上「鏡頭」。<strong>TailwindCSS</strong> 的濾鏡系統涵蓋 <code>filter</code> 系列（<code>blur</code> 模糊、<code>brightness</code>／<code>contrast</code> 明暗、<code>grayscale</code>／<code>sepia</code> 去色、<code>saturate</code> 飽和度、<code>hue-rotate</code> 色相、<code>invert</code> 反色、<code>drop-shadow</code> 輪廓陰影）與 <code>backdrop-filter</code> 系列（<code>backdrop-blur</code> 等，做出<strong>毛玻璃</strong>效果）。這些工具讓你不改圖片檔本身，就能即時調色、模糊、做出玻璃擬態與影像級質感。v4 對這套系統做了關鍵簡化——濾鏡工具會自動組合、不再需要額外加 <code>filter</code> class。這一篇會帶你替版面加上最後一層「鏡頭濾鏡」。</p> </blockquote>