要给一个元素应用高斯模糊,我们只需要指定blur
作为滤镜类型,括号内的值为模糊的半径。为了证明这一点,我们将为Stuff & Nonsense网站的banner背景上使用blur
。
.filter {
filter : blur(5px); }
Stuff & Nonsense网站使用模糊来区分开banner背景。
模糊滤镜的半径可以使用任何CSS单位,所以我们可以使用px
、em
、rem
,甚至cm
。数字越大,应用的半径越大,滤镜效果也越强。但是不能使用百分比。当我们输入无效值时,浏览器会默认应用none
。
要想获得看起来自然的效果,需要设定一个合适的值,这有些困难,但是当我们想使用滤镜时,第一个想到的就是模糊效果,因为在CSS中使用它非常简单。