html - Safari 颜色和边框半径

Question

我有 2 个 div。 我试图在顶部半透明 div 上打一个圆孔，以透视底部 div。

这段代码运行良好，但在 safari 中不行。边界半径似乎打破了这一点。 Safari 有解决方案吗？

.bg {
   position: absolute;
width: 100%;
height: 100%;
background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.cover {
  position: absolute;
  top: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 160px;
  height: 160px;
  box-shadow: 0 0 0 99999px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
}

<div class="bg"></div>
<div class="cover"></div>

Answer 1

看起来 Safari 无法同时处理较大的 box-shadow 展开值和 border-radius。
因此，如果可以接受，您可能会减少点差。

否则，您可以使用 border 本身，就像我在下面的代码片段中所做的那样:

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cover {
  position: absolute;
  top: -99949px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate3d(-50%, 0, 0);
  width: 160px;
  height: 160px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
  border: solid 99999px;
}

<div class="bg"></div>
<div class="cover"></div>