Safari颜色和边框半径

时间:2018-01-04 16:37:41

标签: html css safari

我有2个div。 我试图在顶部的半透明div中制作一个圆孔,以查看底部div。

此代码运行良好,但不适用于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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

看起来Safari无法与box-shadow一起处理大border-radius点差值 因此,如果可以接受,您可以减少差价。

否则您可以像我在下面的代码段中那样使用border

&#13;
&#13;
.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;
}
&#13;
<div class="bg"></div>
<div class="cover"></div>
&#13;
&#13;
&#13;