![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
1佳佳佳佳
这个作者很懒,什么都没留下…
展开
-
safari对100vh的兼容问题
需求:在以下的布局要求下,利用flex布局来实现,但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度,但测试过程中,发现safari浏览器中,页面的高度出现了偏差,比屏幕的高度还要高出一部分,出现了双层滚动条。经研究,发现safari的100vh是包含地址栏和功能列的,而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)解决方案通过innerHeight重新定义一个变量代替vhsafariHacks() { let win原创 2021-09-26 17:10:13 · 1559 阅读 · 0 评论 -
safari对z-index的兼容性
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效可以用transform: translateZ来实现z-index: 20;transform: translateZ(20px); // safari中z-index原创 2021-09-24 18:05:57 · 364 阅读 · 0 评论 -
css实现高斯模糊
想要实现的效果图思路:图片与遮罩层相对定位,将遮罩层的背景图也设置为该图片,再利用高斯模糊,将背景图模糊处理,图片本身的层级高于遮罩层,达到这样的效果<div class="box"> <img src="../../assets/img/test.png" alt="" class="img"> <div class="mh"></div> </div>.box { width: 100px; height: 10原创 2021-09-03 15:08:39 · 496 阅读 · 0 评论