Html 用圆形切口覆盖'；我不能在狩猎中露面

所以我有这个代码：

。背景图像{
高度：700px；
宽度：100%；
背景：红色；
}
.顶{
利润上限：-85px；
位置：相对位置；
高度：700px；
}
.顶部.圆圈{
宽度：100%；
高度：700px；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
保证金：0自动；
z指数：1；
}
圆：在之前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：200px；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-100px；
边界半径：50%；
盒影：0px0px0px999pxrgba（43,54,69,0.75）；
z指数：-1；
}

---

显然，safari的传播半径值太大，存在问题。但如果使用较小的值，如99em，则它应覆盖视口并仍能正确渲染。看看上面的代码片段，然后

。背景图像{
高度：700px；
宽度：100%；
背景：红色；
}
.顶{
利润上限：-85px；
位置：相对位置；
高度：700px；
}
.顶部.圆圈{
宽度：100%；
高度：700px；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
保证金：0自动；
z指数：1；
}
圆：在之前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：200px；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-100px；
边界半径：50%；
盒影：0px 0px 0px 99em rgba（43,54,69,0.75）；
z指数：-1；
}