我设法实现了这种效果但是我对标记并不满意。另外,在IE10/11中有一个奇怪的错误,在您调整窗口大小时会显示1px的间隙。
还有其他方法吗?或者也许在IE中修复此问题。
编辑 圆不能使用边框,它应该是透明的。
body, html { font-size: 18px; } body { background-color: #fff } .avatar { width: 90px; height: 90px; position: absolute; background-color: red; top: -115px; left: 5px; border-radius: 80px; } .wrap { display: block; margin: 100px auto 0 auto; width: 90%; position: relative; } .rect-left, .rect-right { position: relative; width: 50%; height: 150px; float: left; } .rect-left { margin-left: -50px; } .rect-right { margin-right: -50px; } .inner { position: absolute; top: 0; left: 50px; right: 0; bottom: 0; height: 100%; background: rgba(0, 0, 0, 0.8); } .rect-left .inner { left: 50px; right: 0; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .rect-right .inner { left: 0; right: 50px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .rect { float: left; height: 100px; width: 100px; background: rgba(0, 0, 0, 0.8); position: relative; top: 50px; } .circle { display: block; width: 100px; height: 50px; top: -50px; left: 0; overflow: hidden; position: absolute; } .circle:after { content: ''; width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background: rgba(0, 0, 0, 0); position: absolute; top: -110px; left: -40px; border: 40px solid rgba(0, 0, 0, 0.8); } <div class="wrap"> <div class="rect-left"> <div class="inner"></div> </div> <div class="rect"> <span class="circle"></span> <div class="avatar"></div> </div> <div class="rect-right"> <div class="inner"></div> </div> </div>
您可以使用单个元素(加上伪元素)来完成此操作,radial-gradient而伪元素会创建圆,而父元素将背景用作背景。
radial-gradient
div:before { /* creates the red circle */ position: absolute; content: ''; width: 90px; height: 90px; top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */ left: calc(50% - 45px); background-color: red; border-radius: 50%; } div { position: relative; margin: 100px auto 0 auto; width: 90%; height: 150px; border-radius: 6px; /* only the below creates the transparent gap and the fill */ background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */ } /* just for demo */ body, html { font-size: 18px; } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } <div></div>