如何僅使用 CSS 在矩形中建立圓形切口？

使用 CSS 從矩形建立圓形切口

提出的問題尋求一種在矩形內實現圓形切口的替代方法。最初的解決方案使用元素和邊框的組合，效果令人滿意，但缺乏乾淨的標記，並且在某些瀏覽器中遇到錯誤。

替代方法

更多優雅的解決方案涉及利用單一元素（以及偽元素）並採用徑向漸變背景。這是修改後的CSS：

div:before {
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

說明

• 偽元素(:before) 建立一個尺寸為90px 的圓形紅色切口並將其定位在父元素內部。
• 父元素有一個透明的徑向漸變，填充剩餘區域，創建具有切口的矩形形狀。
• 透明漸變的半徑略大於切口的半徑，從而在邊緣周圍留有薄薄的透明間隙。
• 圓的中心和透明間隙是透過徑向漸層中心點的位置來控制的。

此更新的方法解決了乾淨標記問題和初始版本中遇到的瀏覽器錯誤 解決方案。它僅使用 CSS 從矩形形狀提供無縫且視覺上令人愉悅的圓形切口。

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