在CSS中剪切出另一种形状的形状 - 跨浏览器兼容性

Question

我有白色和红色，圆圈，绝对定位的div。有没有办法可以将所有白色圆圈切成透明的CSS并与浏览器兼容？寻找最“原始”的方式。

Answer 1

您可以使用border-radius。

检查此示例：

.container {
  background: black;
  width: 490px;
  height: 490px;
  position: relative;
  background: black url(http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg) no-repeat -500px -500px;
}
.r1 {
  width: 400px;
  height: 400px;
  border-radius: 400px;
  border: 30px solid red;
  position: absolute;
  top: 10px;
  left: 10px;
}
.r2 {
  width: 300px;
  height: 300px;
  border-radius: 300px;
  border: 30px solid red;
  position: absolute;
  top: 60px;
  left: 60px;
}
.r3 {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  border: 30px solid red;
  position: absolute;
  top: 110px;
  left: 110px;
}

<div class="container">
  <div class="r1"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>

Answer 2

你可以看看径向渐变：

＆＃13;

＆＃13;

html {
  min-height: 100%;
  background-image: radial-gradient(
    circle   /* a circle*/
    closest-side at 50% 50%   /* set as closed as possible to center*/,
    transparent 0 /* from center */,
    /* to */transparent 50px, 
    /* from */red 50px, 
    /* to */red 60px,
    /*from */transparent 60px, 
    /* to */transparent 70px,
    /* from */red 70px, 
    /* to */red 80px,
    /* from */transparent 80px,
    /* to */ transparent 100px,
    /* from */ red 100px,
    /* to */ red 120px,
    /* from */ transparent 120px
    /* and so or till end */), 
    /* bg image to show transparency */     url(http://lorempixel.com/150/150);
}

＆＃13;

＆＃13;

＆＃13;

尽可能多地重复模式。您还可以使用calc() example来混合百分比和像素值。

Answer 3

您也可以使用SVG。

body {
  height: 100vh;
  margin: 0;
  display: flex;
}
svg {
  flex: 1;
  background: url(http://fillmurray.com/638/220) no-repeat center center / cover;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="50%" cy="50%" r="40" stroke="#F44336" stroke-width="8" fill="none" />
  <circle cx="50%" cy="50%" r="60" stroke="#F44336" stroke-width="6" fill="none" />
  <circle cx="50%" cy="50%" r="80" stroke="#F44336" stroke-width="10" fill="none" />
</svg>