如何使用 CSS3 建立反圓形狀？-css教學-PHP中文網

如何使用 CSS3 建立反圓形狀？

Mary-Kate Olsen

發布： 2024-12-04 05:05:11

原創

603 人瀏覽過

How to Create an Inverse Circle Shape Using CSS3?

CSS 3 形狀：反圓或切出圓

問題：

如何建立「反圓」」形狀，容器的外邊緣被圓形切掉，在內部留下一個實心圓中心？

答案：

CSS3 徑向背景漸變選項

（適用於Firefox、Chrome、Safari 等現代瀏覽器，和IE10)

這種改進的解決方案允許透明圓與其反向切口之間的「間隙」：

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;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

登入後複製

原答案：

<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;
  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中文網其他相關文章！