CSS3を使用して逆円形状を作成する方法?-CSSチュートリアル-php.cn

CSS3を使用して逆円形状を作成する方法?

Mary-Kate Olsen

リリース： 2024-12-04 05:05:11

オリジナル

604 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。