如何僅使用 CSS 從矩形中切出圓形？

在CSS 中從矩形剪出圓形

創建此效果的一種方法是使用元素組合和巧妙的使用邊界半徑。然而，這種技術存在潛在的缺點，例如不規則的標記和某些瀏覽器中難看的間隙。

替代方法

幸運的是，有一種替代方法採用單一元素和偽元素。這種方法利用了父元素的徑向漸變背景的力量，而偽元素則充當透明圓形切口。

考慮以下程式碼片段：

div:before {
  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  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);
}

說明

• div 元素定義了矩形形狀，並帶有圓角
• 在div 內部，偽元素:before 使用絕對定位和實心紅色邊框建立圓形切口。
• 透明間隙和填充效果是透過應用徑向來實現的div 元素上的漸變背景。漸層在中心創造一個透明區域，與偽元素的圓重疊，從而產生剪切效果。

這種技術有許多優點：

• 它消除了對額外元素的需求，簡化了標記。
• 它在瀏覽器中一致地工作，沒有任何明顯的影響
• 使用簡單的計算就可以將圓精確地居中於矩形內。

透過實現這種替代方法，您可以在 CSS 中有效地從矩形形狀中切出一個圓，實現所需的視覺效果，而沒有以前方法的複雜性和陷阱。

以上是如何僅使用 CSS 從矩形中切出圓形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！