是否可以只使用CSS切出一个空心圆?
这我们都可以做:
但我们可以这样做吗?
圆必须是中空和透明的。因此,问题不是通过在一个div上放置一个纯色圆来解决。
解决方法
你可以用两种不同的技术实现一个透明的切出圆:
1.SVG
以下示例使用inline svg.第一个代码段使用mask element切出透明圆,第二个空心圆用path element切成。圆用2 arc commands:
使用mask元素:
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>
有一个路径元素:
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 -10,0z"/> </svg>
在这种情况下使用SVG的主要优点是:
>较短的代码
>您可以轻松使用图像或渐变填充圆形蒙版
>保持形状的边界并且仅在相对于掩模的填充上触发鼠标事件(在示例中悬停透明的切出圆圈)
2. CSS只使用BOX-SHADOWS
创建一个div with overflow:hidden;和一个圆形伪元素在其内与border-radius。给它一个巨大的盒子阴影,没有背景:
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;}
<div></div>
浏览器对box-shadows的支持是IE9,见canIuse
同样的方法是使用border而不是box-shadows。这是有趣的,如果你需要支持不支持像IE8的box-shadows的borowsers。该技术是相同的,但你需要补偿的顶部和左侧的值,以保持圆在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; }
<div></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。