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

作者: 八妹sss | 来源:发表于2019-06-11 13:19 被阅读0次

filter:blur(10px); 实现阴影效果，IOS上出现
CSS3实现模糊效果
filter()实现模糊的三种方式
Html开发-安卓毛玻璃无效果解决办法
css未掌握的样式
filter:blur()实现图片模糊效果
4-3 视觉效果毛玻璃效果
css实现背景色高斯模糊
关于做Vue的一个demo遇到的问题和总结（2）
图片模糊属性 filter: blur(10px);

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

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

效果其实还是通过作用于具体的img元素才实现模糊效果，如果单单作用于一个空元素背景则没有效果）

网友评论

本文标题：filter:blur(10px); 实现阴影效果，IOS上出现

本文链接：https://www.haomeiwen.com/subject/bpaffctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

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

原因：filter:blur();在iOS上不兼容

解决方法： backdrop-filter：blur(10px); 只支持ios端；只作用于当前元素；

filter的浏览器兼容性：

backdrop-filter的浏览器兼容性：

backdrop-filter 和filter 写出高斯模糊效果以及两者区别

相关文章

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

CSS3实现模糊效果

filter()实现模糊的三种方式

Html开发-安卓毛玻璃无效果解决办法

css未掌握的样式

filter:blur()实现图片模糊效果

4-3 视觉效果毛玻璃效果

css实现背景色高斯模糊

关于做Vue的一个demo遇到的问题和总结（2）

图片模糊属性 filter: blur(10px);

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

原因：filter:blur();在iOS上不兼容

解决方法： backdrop-filter：blur(10px); 只支持ios端；只作用于当前元素；

filter的浏览器兼容性：

backdrop-filter的浏览器兼容性：

backdrop-filter 和filter 写出高斯模糊效果 以及两者区别

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

backdrop-filter 和filter 写出高斯模糊效果以及两者区别