We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
先说环境，我测试了两台IOS手机，iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1，都存在这个诡异的bug。
iphone 8 ios 11.4.1
iphone 6s plus ios 11.4.1
这几天老大告诉我要做一个用户的引导页，引导页大致的效果像是这样子：
我也用过很多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试一试，竟然还是不行
-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
另外，如果有更好的解决方法请告诉我。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
先说环境，我测试了两台IOS手机，
iphone 8 ios 11.4.1和iphone 6s plus ios 11.4.1，都存在这个诡异的bug。这几天老大告诉我要做一个用户的引导页，引导页大致的效果像是这样子：
我也用过很多APP，很多APP其实这个引导页可视区域都是用图片代替的，但是我认为使用图片的话，当引导页消失的时候，用户会发现这和自己在引导页看到的不一致，我认为这是一种不好的用户体验，因此我不想用图片来代替！！！
于是灵光一现使用box-shadow来做，因为box-shadow的第四个值就是阴影的拓展尺寸，我把这个设置为非常大，这样就很适合作为黑色的蒙层部分，想想都感觉自己是如此的机智。
当我兴致勃勃写了一连串的引导页的时候，满心欢喜的以为可以交差了，然后使用了iphone测试了一下，然后就发现了问题，整个引导页蒙层的黑色部分消失了，我的引导页瞬间成了这样子。
纳尼。。。。也就是说 box-shadow不生效。
看到这里，一顿操作，先把浏览器前缀加上，
-webkit-box-shadow来一发，不行，那就-webkit-appearance试一试，竟然还是不行思前想后，不对呀，在安卓上都是正常的呀，应该是ios下的问题，但是不对呀，很对地方都用到了box-shadow，不应该出问题，看着这里的代码，我不禁陷入了深深的思考。。。
要不试试将这个值设置小一点试一下，对呀，于是我做了一个简单的demo，如下：
于是我不断尝试修改box-shadow的尺寸10px 、100px 、1000px、10000px、2000px.....（论二分法在现实测试中的应用，哈哈哈哈），于是经过一番折腾，我最终确定了2039px这个边界值，也就是说2039px（准确来说是2039.98px）
当尺寸小于等于这个值的时候是显示正常的，大于这个值是不能显示box-shadow的，如下：
在这个时候，我扶了扶我想象中的眼镜，真相只有一个
就在我准备下结论的时候，我觉得我仔细看看了这些属性，我觉得border-radius还是很诡异，毕竟应该尽量减少变量才能下结论呢
我尝试这个时候增加10px的圆角，可是此时整个页面又白屏了，纳尼
于是我减少了10px的尺寸，发现这时候显示正常了，wc，2044px，难道和这个有关
我尝试修改其中一个的圆角值，如下：
显示正常
不显示
显示正常，纳尼，卧槽，可以这样修复呀。
我尝试将尺寸修改为丧心病狂的9999px，正常。
心累，就这样我成了一下午的测试工程师，ios的bug真累人。
最后，得出结论就是：
元素同时设置border-radius和box-shadow的时候：如果圆角的值一致，请确保这两个值的和不超过2044px，如果一定会超过的话，请微小修改其中一个圆角的值，如5.999px
另外，如果有更好的解决方法请告诉我。
The text was updated successfully, but these errors were encountered: