该函数需要一个参数,用于指定模糊程度。可以使用px、百分比或者是rem作为单位。
.blur { filter: blur(5px); }
上面的代码会将元素模糊5个像素。
支持blur()
函数的浏览器包括Chrome、Safari、Firefox、Opera和Edge。
实际上,blur()
函数可以和其他CSS的滤镜函数一起使用,例如:brightness()
、contrast()
和grayscale()
等等。
.blur { filter: blur(5px) brightness(50%) contrast(200%) grayscale(50%); }
上面的代码将元素同时添加了多个滤镜效果。
需要注意的是,blur()
虽然是一种美观的效果,但是使用过多会影响页面性能,因此需要谨慎使用。