为什么css毛玻璃效果属性无用

html-css028

为什么css毛玻璃效果属性无用,第1张

只是用到了css滤镜(filter)中的blur属性。

CSS中的毛玻璃特效主要使用了filter属性里的blur()函数,也就是高斯模糊滤镜。

但是要做一个好的毛玻璃效果,需要注意很多细节。

css的backdrop-filter简介:

https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

backdrop-filter可实现毛玻璃(磨砂)的效果,但可能兼容性不好,尤其安卓移动端,

大致效果如下:

绘制简单三角形

如下所示: