filter 接收一组函数，按顺序作用于元素（含其子元素与内容）：blur(2px)、brightness(1.2)、contrast()、grayscale()、sepia()、hue-rotate(90deg)、saturate()、invert()、opacity()，以及 drop-shadow()——一个比 box-shadow 更聪明的投影，它按元素的非透明轮廓（如 PNG 主体）投射，而不是按矩形盒。
filter 会强制元素创建新的层叠上下文与包含块，常被用来做「合成层加速」，但滥用也会占用显存。常见实战：图片 hover 变彩色（grayscale→0）、弹窗背景毛玻璃（backdrop-filter）、Logo 去底投影。
<style> .row { display:flex; gap:14px; padding:20px; } img { width:110px; height:70px; border-radius:8px; transition: filter .3s; } .f1 { filter: grayscale(1); } .f2 { filter: blur(3px); } .f3 { filter: sepia(.8) contrast(1.1); } .row img:hover { filter: none; } .glass { margin:0 20px 20px; padding:14px; border-radius:10px; background: rgba(255,255,255,.35); backdrop-filter: blur(8px); } /* 毛玻璃 */ </style> <div class="row"> <img class="f1" src="https://picsum.photos/id/237/220/140"> <img class="f2" src="https://picsum.photos/id/237/220/140"> <img class="f3" src="https://picsum.photos/id/237/220/140"> </div> <div class="glass">背后内容被模糊，文字仍清晰 —— backdrop-filter</div>