透明空心或切圆圈
是否可以仅使用 CSS 删除空心圆？
我们都可以这样做：
但我们可以这样做吗？
圈必须是空心透明的。因此，通过在div上放置一个纯色圆圈来解决问题。
7 个答案:
答案 0 :(得分：57)
您可以使用两种不同的技术实现透明剪切圈：
1.SVG
以下示例使用inline svg。第一个代码段使用mask element剪切透明圆圈，第二个空心圆圈使用path element。该圆圈由2 arc commands：
组成使用掩码元素：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="5" y="5" width="90" height="40" fill="#fff"/>
<circle cx="50" cy="25" r="15" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
有一个路径元素：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
display:block;
width:70%;
height:auto;
margin:0 auto;
}
path{
transition:fill .5s;
fill:#E3DFD2;
}
path:hover{
fill:pink;
}<svg viewbox="-10 -1 30 12">
<path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>
在这种情况下使用SVG的主要优点是：
- 更短的代码
- 您可以轻松使用图像或渐变来填充圆形遮罩
- 保持形状的边界并触发鼠标仅在面对面具的填充上发生（悬停透明切割圆在示例中）
2。 CSS仅使用BOX-SHADOWS
使用{-1}创建一个div，并在其中使用border-radius创建一个圆形伪元素。给它一个巨大的盒子阴影，没有背景：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
overflow:hidden;div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
浏览器对框阴影的支持是IE9 +请参阅canIuse
同样的方法是使用border而不是box-shadow。有趣的是，你需要支持不支持像IE8这样的盒子阴影的borowsers。技术是相同的，但你需要补偿顶部和左侧的值，以保持圆在div的中心：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<div></div>body{
background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
background-size:cover;
}
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:-325px; top:-475px;
border-radius:100%;
width:150px; height:150px;
border:500px solid #E3DFD2;
}
答案 1 :(得分：24)
可以使用radial gradient背景和指针事件（允许通过圆圈层进行鼠标交互，例如文本选择）来完成。这是a demo page和屏幕截图：
这就是它的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
.underneath {
padding: 0;
margin: 265px 0 0 0;
width: 600px;
}
.overlay {
top: 0;
left: 0;
position: absolute;
width: 600px;
height: 600px;
background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
pointer-events: none; /* send mouse events beneath this layer */
}
</style>
</head>
<body>
<p class="underneath">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="overlay"></div>
</body>
</html>
答案 2 :(得分：14)
参考web-tiki的回答我想补充一点，你总是可以将div放在border的中心位置，所以使用div{
position:relative;
width:500px;
height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius:50%;
width:150px; height:150px;
border: 1000px solid rebeccapurple;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;} - 属性是没有问题的，浏览器支持。
<div></div>document.addEventListener( "DOMContentLoaded", function(){
setInterval(function(){
if(document.getElementById("moving").style.height === "500px"){
document.getElementById("moving").style.height = "0px";
} else {
document.getElementById("moving").style.height = "500px";
}
}, 2000);
});
您可以通过这种技术获得真正的创意：
#container {
width: 500px;
margin: 0 auto;
border: 1px solid black;
overflow:hidden;
position: relative;
}
#circle{
position:relative;
height:150px;
margin:0 auto;
clear:left;
overflow:hidden;
}
#circle::before, #circle::after {
content:'';
border-radius:50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#circle::before {
height: 140px;
width: 140px;
background: rebeccapurple;
}
#circle::after{
width:150px;
height:150px;
border: 2000px solid rebeccapurple;
}
#line {
margin: 0 auto;
width: 6px;
height: 200px;
position: relative;
}
#line::before, #line::after {
content: " ";
background-color: rebeccapurple;
height: 200px;
width:2000px;
position:absolute;
}
#line::before {
right: 100%;
}
#line::after {
left: 100%;
}
#moving {
height: 0px;
width: 100%;
background: blue;
transition: 2s height;
position: absolute;
top: 0px;
z-index: -1;
}
body{
background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
}<div id="container">
<div id="circle"></div>
<div id="line"></div>
<div id="circle"></div>
<div id="moving"></div>
</div>{{1}}
答案 3 :(得分：5)
关于＆＃34;方法1＆＃34;来自＆＃34; Pius Nyakoojo＆＃34;，稍作改进（见下文）就可以了。我个人认为这是最简单的解决方案：
<html>
<!-- Assuming the stuff to mask is a 100 pixel square -->
<style>
.mask {
position: absolute;
top: -50px; /* minus half the div size */
left: -50px; /* minus half the div size */
width: 100px; /* the div size */
height: 100px; /* the div size */
background-color: transparent;
border-radius: 100px; /* the div size */
border: 50px solid white; /* half the div size */
pointer-events: none; /* send mouse events beneath this layer */
}
.stuff {
position: absolute;
width: 100px; /* the div size */
height: 100px; /* the div size */
overflow: hidden; /* hide the excess of the mask border */
background-color: #CCC;
}
</style>
<body>
<div class="stuff">
<div class="mask"></div>
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
</div>
</body>
</html>
答案 4 :(得分：1)
方法1- 首选
<div class="circle"></div>
$radius: 50px;
$thickness: 5px;
.circle {
width: $radius;
height: $radius;
background-color: transparent;
border-radius: $radius;
border: $thickness solid gray;
}
方法2
<div class="circle"></div>
$radius: 50px;
$thickness: 5px;
.circle {
width: $radius;
height: $radius;
}
.circle::before, .circle::after {
margin: -2px 0;
}
.circle::before {
content: '';
display: inline-block;
width: $radius;
height: calc(#{$radius} / 2);
background-color: transparent;
border-top-left-radius: calc(#{$radius} / 2);
border-top-right-radius: calc(#{$radius} / 2);
border: $thickness solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.circle::after {
content: '';
display: inline-block;
width: $radius;
height: calc(#{$radius} / 2);
background-color: transparent;
border-bottom-left-radius: calc(#{$radius} / 2);
border-bottom-right-radius: calc(#{$radius} / 2);
border: $thickness solid gray;
border-top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
答案 5 :(得分：0)
您可以使用CSS蒙版和额外的SVG图片进行操作。
Although browser support is weak
onClick={handleSort("title")}
onClick={() => handleSort("title")}
答案 6 :(得分：0)
我们可以使用radial-gradient和mask来做到这一点。如果使用单个div，则没有伪元素。
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1060/720/1280);
background-size: cover;
}
.a {
/* this is flexible. you can change */
--circle-radius: 100px;
height: 100%;
width: 100%;
--mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: #000;
}<div class="a"></div>
圆半径也可以是百分比值：
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 30px;
background-image: url(https://picsum.photos/id/1060/720/1280);
background-size: cover;
}
.a {
--circle-radius: 20%; /* changed as percent value */
height: 100%;
width: 100%;
--mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: rgba(0, 0, 0, .8);
}<div class="a"></div>
另一个想法：
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1060/720/1280);
background-size: cover;
}
.a {
--circle-radius: 100px;
--border-width: 30px;
height: 100%;
width: 100%;
--mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), transparent calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: #000;
}<div class="a"></div>
反向：
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1060/720/1280);
background-size: cover;
}
.a {
--circle-radius: 100px;
--border-width: 30px;
height: 100%;
width: 100%;
--mask: radial-gradient(circle farthest-side at center center, #000 var(--circle-radius), transparent calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), #000 calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: #000;
}<div class="a"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？