如何使用 CSS 高效地从矩形中切出圆形？

使用CSS从矩形中切出圆形

创建从矩形中切出的透明圆形的挑战已经引发在线讨论。虽然存在一些解决方案，但存在一些限制和错误，导致用户寻找替代方案。

使用径向渐变的替代方法

初始解决方案的一种替代方法在于在父元素上使用径向渐变。该渐变创建圆形形状，而伪元素用于定义实际的圆形。这种简化的标记消除了对多个 div 的需要，并解决了与 IE 10/11 相关的错误。

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

通过利用这种径向渐变方法，您可以有效地从矩形形状中切出圆形，从而避免先前解决方案的局限性并确保不同浏览器之间的兼容性。

以上是如何使用 CSS 高效地从矩形中切出圆形？的详细内容。更多信息请关注PHP中文网其他相关文章！