如何使用 CSS3 創造「反圓」或「切圓」效果？

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

創造類似「反圓」或「 CSS 中的「剪出圓圈」是常見的設計挑戰。技術實現此效果的詳細說明：

更新：CSS3 徑向背景漸變選項

適用於支援 CSS3 徑向背景漸變的瀏覽器（例如​​ Firefox） ，Chrome），可以在圓與其反面之間創建透明的“間隙”剪切：

HTML：

<div>

CSS：

.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: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
}

原答案：

使用 z索引與定位，可以達到乾淨的「反圓」效果：

HTML:

<div>

CSS:

.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 創造「反圓」或「切圓」效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！