首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    毛玻璃 CSS 特效兼容性方案探究

    果不其然,导航栏就用到了“家族式设计”的“毛玻璃”特效 打开控制台抄一抄作业: 主要是用到了 backdrop-filter CSS3 的属性,于是乎,顺手就用上了。...去查了查兼容性:backdrop-filter -- caiuse[1] emmm~,再考虑到我司自己魔改的 Webview 内核情况。。。...阴影 grayscale(): 灰度 hue-rotate(): 色相旋转 invert(): 反色 opacity(): 透明度 saturate(): 饱和度 sepia(): 褐色 如果不考虑兼容性...3.1 ::before + 固定双背景图 这里偷个懒,直接使用了伪元素 ::before,实际场景为了考虑兼容性,建议大家还是用 div 块级元素占位 .card-filter::before {...如果“毛玻璃”和背景没有文中的相对移动,直接让 UI 小姐姐切个图,直接解决一切兼容性 & 性能问题!

    1.7K10

    编写兼容JS代码

    前文介绍了:  1 DOM四个常用的方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick...但是在编写合格的javascript代码时,需要注意:   1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问   2 分离javascript:把html与javascript分离,有助于后期代码的维护...  3 向后兼容性:确定老版本的浏览器不会因为脚本禁止而死掉   4 性能考虑:确定脚本执行的最优   编写优化的代码   针对前一篇中的相册的代码,这里主要修改的地方是把onclick方法删除,在页面加载时...return true; } addLoadEvent(prepareGallery);   上面部分的代码,添加了很多的安全性检查和兼容

    3.2K90
    领券