CSS 3 形状：“反圆”或“剪出圆”
创建类似于“反圆”或“ CSS 中的“剪出圆圈”是一个常见的设计挑战。以下是如何使用 CSS 3 技术实现此效果的详细说明：
更新：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中文网其他相关文章！
