Css 剪辑路径插入圆？

是否可以创建一个插入圆剪辑路径，以便剪辑路径可以有效地通过中心的div切割一个孔，而不是仅显示中心

除在中心切割的孔外，还应显示所有div，以创建如下内容：

我想使用剪辑路径或类似的东西，这样我可以有东西（图像和内容）背后的div和剪辑路径将被用来揭示这一点。因此，div（我的jsfiddle中的蓝色div）将通过一个转换从中心消失，以显示其背后的内容。

div{
背景：蓝色；
宽度：200px；
高度：200px；
-webkit剪辑路径：圆形（中心50px）；
}

---

您可以通过在

中添加元素来完成此操作

我使用了

。这是密码

HTML

<div>
  <span></span>
</div>

例如：

您还可以在div中使用

边框半径

，以获得圆角边框

---

我不认为你可以通过

剪辑路径

实现这一点，但你肯定可以使用

径向渐变

背景图像在

div

上切一个洞。这比

剪辑路径

具有更好的浏览器支持

注意：此方法（和

框阴影

）仅在覆盖以下内容的元素具有彩色填充时有效。如果不使用sandybrown颜色，而是需要在顶部有另一个图像，那么这些方法将不起作用，因为它们实际上没有切割孔，它们只是模仿这种效果

.div带孔{
高度：100vh；
背景：径向梯度（中心圆形，透明25%，沙褐25.5%）；
背景大小：100%100%；
背景位置：50%50%；
过渡：一切都很轻松；
}
.div带孔：悬停{
背景尺寸：400%400%；/*应为100%*（100/径向梯度的透明百分比*/
}
身体{
背景：url(http://lorempixel.com/800/800/nature/1);
最小高度：100vh；
保证金：0；
填充：0；
}

---

您也可以在

:after

伪元素上使用

框阴影来执行此操作


div{
位置：相对位置；
宽度：300px；
高度：200px；
溢出：隐藏；
背景：url（'http://planetcompas.com/live/wp-content/uploads/2013/04/2015-01-Beautiful-Planet-And-Space-4-Cool-Wallpapers-HD.jpg');
背景尺寸：封面；
背景位置：中心；
}
部门：之后{
宽度：50px；
高度：50px；
内容：''；
边界半径：50%；
背景：透明；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
盒影：0px 0px 0px 300px浅蓝色；
过渡：所有0.3s线性；
}
div:悬停：之后{
不透明度：0；
}
mask
可以做到这一点，它可以在任何类型的背景下工作：


div{
背景：线性梯度（蓝色、红色）；
宽度：200px；
高度：200px；
-webkit掩模：径向梯度（圆形50px，透明98%，#fff 100%）；
遮罩：径向梯度（圆形50px，透明98%，#fff 100%）；
}
您可以使用以下方法在
剪辑路径中创建孔：


let精度=64；
设半径=25；
设c=[…数组（精度）].map（（u，i）=>{
设a=-i/（精度-1）*Math.PI*2；
设x=数学cos（a）*半径+50；
设y=Math.sin（a）*半径+50；
返回`${x}%${y}%`
})
document.querySelector（'div'）。style.clipPath=
`多边形（100%50%，100%100%，01100%，00100%，01000%，100%50%，${c.join（'，'）}）`；
div{
背景：蓝色；
宽度：200px；
高度：200px；
}
SVG掩码解决方案

圆用作遮罩，其半径设置动画

动画将在单击图像后开始



你能附上一张图片来准确显示你想要的东西吗？你的目标是什么？你想使用clip path属性有什么原因吗？@web tiki我想使用clip path或类似的东西，这样我就可以在div后面放一些东西（图片和内容），然后使用clip path来显示这一点。因此，div（来自我的JSFIDLE的蓝色div）将从中心消失，使用过渡显示其背后的内容。抱歉，我可能不太清楚，我更新了一个问题的图像，我在寻找什么。它使剪辑路径打孔的中心，而不是只显示分区的中心。这不是我的意思。我想要它，使我的意思剪辑路径的d仅显示div的中心圆。它应该从div的中心剪切一个圆，以便显示除中心圆以外的所有内容。还有一种混合混合模式方法（是的，不适用于IE）：）
div{
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
  position:relative;
}
div span{
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}