css |
您所在的位置：网站首页 › su如何做一个镂空的圆 › css |
css
|
是否可以仅使用 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;}只有一个路径元素: 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 的主要优点是: 更短的代码 您可以轻松地使用图像或渐变来填充圆形 mask 保持形状的边界并仅在符合 mask 的填充上触发鼠标事件(示例中将鼠标悬停在透明切出的圆圈上) 创建一个带有 overflow:hidden; 的 div 和一个带有 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;}支持框阴影的浏览器是 IE9+，请参阅 canIuse 同样的方法是使用边框而不是框阴影。如果你需要支持像 IE8 这样不支持 box-shadows 的浏览器，这很有趣。该技术是相同的，但您需要补偿 top 和 left 值以将圆圈保持在 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; }关于css - HTML 中的透明镂空或镂空形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34454615/ |
【本文地址】
今日新闻 |
推荐新闻 |