如何使用 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中文网其他相关文章！