css 实现高斯模糊(毛玻璃效果)

801 阅读1分钟

继续css的分享,在项目中我们有需要实现某些指定元素背景高斯模糊的时候,可以使用css中的 filter 与 backdrop-filter 特性

使用: filter:blur(radius) 或 backdrop-filter: blur(radius);
radius:radius一般用于设置模糊半径,值越大,模糊程度越大,当值为0的时候图像与原图保持一致。支持数据格式如:px、em、rem、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc等

image.png

(点击查看代码)