Ionic開發中box-shadow在ios中顯示有問題

標籤：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相關的，實際目的都是為了這個圓形偽類能夠在鏤Null 物件的正中間。

 

話說誰能最後告訴我為什麼box-shadow在ios下渲染的問題怎麼才能解決呢？

 

Ionic開發中box-shadow在ios中顯示有問題