先說環境，我測試了兩臺IOS手機，iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1，都存在這個詭異的bug。
這幾天老大告訴我要做一個使用者的引導頁，引導頁大致的效果像是這樣子：
我也用過很多APP，很多APP其實這個引導頁可視區域都是用圖片代替的，但是我認為使用圖片的話，當引導頁消失的時候，使用者會發現這和自己在引導頁看到的不一致，我認為這是一種不好的使用者體驗，因此我不想用圖片來代替！！！
於是靈光一現使用box-shadow來做，因為box-shadow的第四個值就是陰影的擴充尺寸，我把這個設定為非常大，這樣就很適合作為黑色的蒙層部分，想想都感覺自己是如此的機智。
box-shadow: 0 0 0 9999999px rgba(0,0,0,.8)
複製程式碼
當我興致勃勃寫了一連串的引導頁的時候，滿心歡喜的以為可以交差了，然後使用了iphone測試了一下，然後就發現了問題，整個引導頁蒙層的黑色部分消失了，我的引導頁瞬間成了這樣子。
納尼。。。。也就是說 box-shadow不生效。
看到這裡，一頓操作，先把瀏覽器字首加上，-webkit-box-shadow來一發，不行，那就-webkit-appearance試一試，竟然還是不行
思前想後，不對呀，在安卓上都是正常的呀，應該是ios下的問題，但是不對呀，很對地方都用到了box-shadow，不應該出問題，看著這裡的程式碼，我不禁陷入了深深的思考。。。
要不試試將這個值設定小一點試一下，對呀，於是我做了一個簡單的demo，如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS border-shadow 屬性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
</head>
<style>
#mask{
width: 200px;
height: 200px;
background: #fff;
box-shadow: 0px 0px 0px 10px #000;
border-radius: 5px;
}
</style>
<body>
<div id="mask">
hello
</div>
</body>
</html>
複製程式碼
於是我不斷嘗試修改box-shadow的尺寸10px 、100px 、1000px、10000px、2000px.....（論二分法在現實測試中的應用，哈哈哈哈），於是經過一番折騰，我最終確定了2039px這個邊界值，也就是說2039px（準確來說是2039.98px）
當尺寸小於等於這個值的時候是顯示正常的，大於這個值是不能顯示box-shadow的，如下：
在這個時候，我扶了扶我想象中的眼鏡，真相只有一個
就在我準備下結論的時候，我覺得我仔細看看了這些屬性，我覺得border-radius還是很詭異，畢竟應該儘量減少變數才能下結論呢
我嘗試這個時候增加10px的圓角，可是此時整個頁面又白屏了，納尼
於是我減少了10px的尺寸，發現這時候顯示正常了，wc，2044px，難道和這個有關
我嘗試修改其中一個的圓角值，如下：
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 90px;
複製程式碼顯示正常
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 6px;
複製程式碼不顯示
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 5.9999px 6px;
複製程式碼顯示正常，納尼，臥槽，可以這樣修復呀。 我嘗試將尺寸修改為喪心病狂的9999px，正常。
心累，就這樣我成了一下午的測試工程師，ios的bug真累人。
最後，得出結論就是：
元素同時設定border-radius和box-shadow的時候：如果圓角的值一致，請確保這兩個值的和不超過2044px，如果一定會超過的話，請微小修改其中一個圓角的值，如5.999px
另外，如果有更好的解決方法請告訴我。
