如何使用 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中文網其他相關文章！