css - 透明的空心或切出的圆圈

是否可以只使用CSS剪切空心圆？
我们都能做到：
但我们能做到吗？
圆圈必须是中空透明的。因此，在adiv上放置一个纯色圆圈并不能解决这个问题。

最佳答案

您可以使用两种不同的技术实现透明切圆：
1.SVG
以下示例使用inline svg。第一个片段使用mask element剪切透明圆，第二个空心圆使用path element生成。圆圈由2arc commands组成：
使用mask元素：

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="30">
      <rect x="5" y="5" width="90" height="40" fill="#fff"/>
      <circle cx="50" cy="25" r="15" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>

使用一个路径元素：

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}
path:hover{
  fill:pink;
}

<svg viewbox="-10 -1 30 12">
  <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>

在这种情况下使用SVG的主要优点是：
较短代码
可以很容易地使用图像或渐变填充圆形遮罩
保持形状的边界，并仅在与遮罩相关的填充上触发鼠标环境（在示例中悬停透明剪切圆）

2仅使用框阴影的CSS
创建一个带overflow:hidden;的div和一个带边框半径的圆形伪元素。给它一个巨大的阴影，没有背景：

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<div></div>

浏览器对框阴影的支持是IE9+请参见canIuse
同样的方法是使用边框而不是框阴影。如果您需要支持不支持如IE8这样的框阴影的borowser，这是很有趣的。方法是相同的，但您需要使用顶部和左侧的值进行补偿，以使圆保持在div的中心：

body{
    background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
    background-size:cover;
}
div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:-325px; top:-475px;
    border-radius:100%;
    width:150px; height:150px;
    border:500px solid #E3DFD2;
}

<div></div>

关于css - 透明的空心或切出的圆圈，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34454615/