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

使用CSS 在矩形上切一個圓形孔

在追求特定的視覺效果時，許多開發人員會遇到標記和兼容性問題的挑戰，特別是在嘗試時使用CSS 在矩形內建立圓形切口。

為了解決這些問題並增強對 CSS 技術的理解，讓我們探索一個替代方法來達到預期的結果。透過在父元素上使用徑向漸變背景和圓形切口的偽元素，我們可以簡化標記並消除 IE 10/11 中的 1px 間隙問題。

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 表示的元素定義了紅色圓形切口。它在父 div 內絕對定位並水平居中，反映了我們想要實現的圓孔。背景顏色和邊框半徑屬性設定其視覺外觀。

父 div 相對定位以包含切口並提供矩形背景。邊框半徑將其角變圓，在切口和矩形之間建立平滑過渡。

父 div 上的徑向漸變背景對於實現透明間隙和填充效果至關重要。徑向漸層從圓的中心點（50px 50px at 50% -30px）開始向外擴展，創造從透明到半透明黑色的柔和過渡。透過仔細調整漸變的半徑，我們創建了切入矩形的圓孔的錯覺。

與使用多個元素相比，這種方法提供了更簡單的標記，並消除了IE 10/ 中遇到的1px 間隙問題11.它僅依靠CSS 屬性來實現所需的視覺效果，增強了可維護性和跨瀏覽器相容性。

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