Safari颜色和边框半径 [英] Safari color and border radius

问题描述

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

此代码效果很好，但在野生动物园中不起作用。似乎边界半径打破了这一点。

  .bg {位置：绝对；宽度：100％；高度：100％；背景：url（ https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg）固定无重复中心-webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; background-size：cover;}。cover {position：absolute;顶部：50px；左：50％； -webkit-transform：translation（-50％，0）; -ms-transform：翻译（-50％，0）;转换：translate（-50％，0）;宽度：160像素；高度：160像素；框阴影：0 0 0 99999px;颜色：rgba（30，30，30，.8）; border-radius：100％;}  

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

p>

解决方案

像Safari这样的浏览器无法处理 box-shadow 带有$的大价差值c $ c>边界半径。

如果可以接受的话，您可以降低点差。

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

  .bg {位置：绝对；宽度：100％;高度：100％;背景：url（ https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg）固定无重复中心中心； -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面；}。cover {位置：绝对；顶部：-99949px；左：50％； -webkit-transform：translation（-50％，0）; -ms-transform：翻译（-50％，0）;转换：translate3d（-50％，0，0）;宽度：160像素；高度：160像素；颜色：rgba（30，30，30，.8）;边界半径：100％；边框：纯色99999px;}  

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

I have 2 divs. I am trying to make a round hole in top semi transparent div to see through to bottom div.

This code works well, but not in safari. It seems that border radius breaks this. Is there a solution for 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>

解决方案

Looks like Safari cannot handle big box-shadow spread values with border-radius together.
So you might decrease the spread if acceptable.

Otherwise you can use border itself as I did in the snippet below:

.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>

这篇关于Safari颜色和边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！