本來是開發中一個簡單的需求，就是類似用戶導航一樣，除了重點部分，其他地方都被黑色透明層遮住，為了項目保密，我還是用一個別人做的列子來表達下我的意思：
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下渲染的問題怎么才能解決呢？