个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
38
4
<分区>
我想在 skyblue 所在的这个元素上切一个洞，这样我就可以看到背景了。我似乎无法弄清楚如何做到这一点。我已经看到它完成了，但我无法使用圆锥梯度复制它。
这就是我到目前为止所得到的。我试图让 skyblue 透明，但那只是显示了圆锥梯度。
.container { width: 200px; }
.spinner {
height: 0px;
width: 100%;
padding-bottom: calc(100% - 20px);
margin: 0;
background: radial-gradient(circle at center, skyblue 54%, transparent 54.8%),
conic-gradient(from 0deg at center, transparent 45deg, orange 360deg);
clip-path: circle(46% at center);
}<div class="container">
<div class="spinner"></div>
</div>我也试过使用 :after 伪选择器，但是没有用:
.spinner:after {
content: '';
background: green;
clip-path: circle(50px at center);
width: 168px;
height: 168px;
}
0
我是一名优秀的程序员,十分优秀！