如何使用 CSS 建立反轉或鏤空圓形？

CSS 3 形狀：「反圓」或「剪出圓」

在CSS 中，反圓或剪出圓是一種類似於帶有圓的形狀切口部分。它可以使用各種技術來實現，但兩種常見的方法包括：

使用嵌套元素和絕對定位

此方法涉及創建兩個嵌套元素，一個內圓（ #a）以形成實心圓形部分，以及包含負z 索引以將其定位在內圓後面的外部形狀(#b)。外部形狀具有透過 CSS 邊框和負邊距/填充調整實現的彎曲切口部分。

範例程式碼：

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

使用徑向背景漸層和絕對定位

另一種方法是使用CSS3 徑向背景漸變來建立一個圓圈，並放置一個負邊距絕對定位的div 來建立剪切效果。此選項適用於支援 CSS 徑向漸層的瀏覽器。

範例程式碼：

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

這些技術提供了靈活的選項，可以在 CSS 中建立反向或剪切圓，而無需依賴圖片。合適的選擇取決於瀏覽器相容性、設計要求和期望的效果。

以上是如何使用 CSS 建立反轉或鏤空圓形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！