CSS Filter 的實務用法
CSS filter 能在不修改原始檔案的情況下即時改變圖片或任何 HTML 元素的視覺呈現。亮度與對比適合處理封面可讀性，grayscale 與 sepia 可建立一致的品牌情緒，hue-rotate 能快速探索配色，drop-shadow 則可依透明內容輪廓產生陰影。
多個濾鏡會由左至右依序計算，因此順序可能影響結果。為了維持文字與影像辨識度，降低 opacity 或 contrast 後應在實際背景上再次檢查。大量套用 blur 也可能增加瀏覽器繪製成本，動畫時尤其需要節制。
使用步驟
- 上傳圖片或直接使用內建向量風景。
- 拖曳每個參數，並切換並排或滑桿比較。
- 確認結果後複製 CSS，貼到目標元素的樣式中。
常見問題
CSS filter 會永久修改原圖嗎？
不會，它只改變元素在瀏覽器中的渲染，原始檔案內容保持不變。
多個 filter 可以一起使用嗎？
可以，將多個函式以空格串接在同一個 filter 屬性即可。
為什麼濾鏡順序會影響結果？
每一項都以前一項的輸出為輸入，例如先轉灰階再旋轉色相，會與反向順序不同。
drop-shadow 和 box-shadow 差在哪裡？
drop-shadow 會依透明像素輪廓投影；box-shadow 通常依元素矩形盒模型投影。
上傳的圖片安全嗎？
檔案透過 Object URL 留在本機頁面，工具沒有上傳或 API 呼叫。