filter:blur(10px);|filter:blur(10px); 实现阴影效果，IOS上出现裁剪的效果 filter:blur(10px);实现阴影效果，

filter:blur(10px); 实现阴影效果，IOS上出现裁剪的效果
文章图片
image.png

文章图片
image.png 原因：filter:blur(); 在iOS上不兼容解决方法： backdrop-filter：blur(10px); 只支持ios端；只作用于当前元素； filter的浏览器兼容性：

文章图片
image.png backdrop-filter的浏览器兼容性：

文章图片
image.png backdrop-filter 和filter 写出高斯模糊效果以及两者区别 1、backdrop-filter：blur(10px); 只支持ios端；只作用于当前元素；
适用场景：为背景添加模糊效果；如果目标元素内包裹着其他内容则应用filter属性；（不支持安卓，效果不明显）
2、filter：blur(10px); 兼容性比较好，不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素没有效果
适用场景：

文章图片
image.png 【filter:blur(10px); |filter:blur(10px); 实现阴影效果，IOS上出现裁剪的效果】效果其实还是通过作用于具体的img元素才实现模糊效果，如果单单作用于一个空元素背景则没有效果）

filter:blur(10px);|filter:blur(10px); 实现阴影效果，IOS上出现裁剪的效果

推荐阅读

高洪波在干嘛高洪波到底如何，高洪波为什么

有没有哪个明星让你因为他的眼睛而粉上他的？

斯凯奇的鞋为什么这两年很火？

如何种好黄瓜，如何种黄瓜?

精辟人生哲理100句格言有哪些

2020年10月8号几点出行最好

爱普生l 310如何清零

mongodb数据统计 mongodb 随机数

光遇禁阁光之翼位置

心脏房颤是怎么回事房颤是怎么回事

脚后跟干裂是什么原因？

方正打印机不吸纸维修价格

进口海参哪里产的好

表示开心的句子

桌面上有一个文件夹删不掉为什么文件夹删不掉

胃病|胃病“根源”已找到，不是辣椒，别不当回事，当心胃会受伤

安卓仿苹果ios13主题，我手机是安卓的我想换成Iphone的主题怎么换

黛丝恩植萃洗发水好用吗？黛丝恩和Reveur洗发水哪款好用

芥菜咸鸭蛋汤怎么做芥菜咸蛋汤怎么做

冰袖的工作原理是什么呢