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