CSS深度图：给你的网页照片也来个“浅景深” 想象一下，你拿着手机对着你心爱的多肉植物咔嚓一张，照片里背景虚化得恰到好处，完美衬托出多肉那毛茸茸的可爱叶片。这就是摄影里常说的“浅景深”，能让画面更有层次感，突出主体。 那么问题来了，网页上的图片怎么实现这种效果呢？难道要PS一张张修？No No No，作为一名优秀的“前端艺术家”（自封的），我们怎么能这么没有效率呢？ 今天我们就来聊聊如何用CSS的filter属性，模拟出类似景深的效果，让你的网页也瞬间高大上起来。 “伪景深”的原理：模糊与焦点 要理解CSS如何实现“伪景深”，首先要搞清楚景深的原理。简单来说，景深就是照片中清晰的部分的范围。浅景深意味着清晰范围很小，只有焦点附近的物体是清晰的，而背景和前景都会模糊。 CSS的filter属性里有个好东西叫做blur()，顾名思义，就是模糊。我们可以通过控制不同区域的模糊程度，来模拟景深效果。核心思路就是：让焦点区域保持清晰，而离焦点越远的地方越模糊。 代码实现：从简单到复杂 让我们从最简单的例子开始，一步步解锁“伪景深”的奥秘。 1. 最简单的模糊：全局模糊 .image-contai …