透明空心或切出圈
是否有可能只使用CSS 切出一个空心圆 ？
这个我们都可以做：
但是我们能做到吗？
圆圈必须是中空的和透明的 。 因此这个问题并没有通过在div一个纯色圆来解决。
你可以用两种不同的技术来实现一个透明的切割圆 ：
1.SVG
以下示例使用内联svg 。 第一个片段使用掩模元素切出透明圆，第二个空心圆形成一个path元素 。 这个圆是由2个弧命令组成的 ：
面具元素：
body{background:url('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>
可以使用径向渐变背景和指针事件（以允许通过圆形图层的鼠标交互，例如文本select）完成。 这是一个演示页面和一个屏幕截图：
这将是它的代码：
<!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>
在提到web-tiki的答案时，我想补充一点，你总是可以用translate(-50%,-50%)来居中放置一个div，所以使用border -property是没问题的，它具有更好的浏览器支持。
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('8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<div></div>
关于“Pius Nyakoojo”中的“方法1”，稍有改进（见下文）就可以了。 我个人认为这是最简单的解决scheme：
<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>
方法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; }
