码迷,mamicode.com
首页 > 移动开发 > 详细

Ionic开发中box-shadow在ios中显示有问题

时间:2017-01-18 11:08:20      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:over   定位   one   com   显示   idt   open   填充   开发   

本来是开发中一个简单的需求,就是类似用户导航一样,除了重点部分,其他地方都被黑色透明层遮住,为了项目保密,我还是用一个别人做的列子来表达下我的意思:

http://www.zhangxinxu.com/study/201603/overlay-cover-refer-to.html

我最初发现用box-shadow简直是超级好用,先做一个圆圈,再做个定位,然后直接设置box-shadow: 0 0 0 1997px rgba(0,0,0,0.6);这个1997我也是随手设置的,打个包在安卓上跑的杠杠滴!但是没想到到了ios上,居然完全没效果,什么-webkit-box-shadow,-webkit-appearance:none;统统没有用!

更奇怪的是这个box-shadow在模拟器上跑的好好的,但是到了真机上面测试却不起作用,简直让人崩溃,幸亏有个同事发现玄机在box-shadow的第四个值spread上面,当设置太大的时候,safari居然渲染有问题,他一个像素一个像素的调整,最终发现1008px这个界限值,当我兴冲冲改成box-shadow: 0 0 0 1008px rgba(0,0,0,0.6)的时候,测试跑过来跟我说iphone 6 plus上还是不行!难道说我又要一个个像素调6 plus?万一以后又出什么8 plus,9 plus怎么办?想来我只能另辟蹊径了,/(ㄒoㄒ)/~~

 

结果我想了一个最笨的方法!上下左右四个div夹击这个镂空圆,然后针对这个圆设置半透明背景图,这样就可以做出最终效果。

本来这样就可以收工了,但是孜孜不倦的同事又扔过来一个链接,就是上面鑫大神那个,我才发现原来世上还有如此高深莫测的办法,简单来说,先对镂空圆做一个定位,然后设置他的border,也就是说那些透明灰色快,都是镂空圆对象的border!但是这个只能针对矩形,如何让圆角div也能实现这个效果,伪元素!

只要给镂空圆对象添加一个圆角伪元素,也通过border的方式设置出他的边界,保证能填充矩形和圆形中间的间隙,就完美的解决该问题了!

.cover::before {
    content: ‘;
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

其中left和top的位移是跟设置的border-width相关的,实际目的都是为了这个圆形伪类能够在镂空对象的正中间。

 

话说谁能最后告诉我为什么box-shadow在ios下渲染的问题怎么才能解决呢?

 

Ionic开发中box-shadow在ios中显示有问题

标签:over   定位   one   com   显示   idt   open   填充   开发   

原文地址:http://www.cnblogs.com/flyGrey/p/6294179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!