CSS圆环边画小圆
CSS圆环边画小圆在前端开发中比较常见,下面就来讲一下如何用CSS实现这一效果。
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #F2F2F2;
}
.circle:before {
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
代码解析:
首先,我们通过CSS中的border-radius属性实现了一个纯CSS的圆形,接下来通过:before伪元素来实现小圆形。
通过设置小圆形定位到圆环的中心。
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #F2F2F2;
}
.circle:before {
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
top: calc(50% - 70px);
left: calc(50% + 70px);
}
如果我们想要让小圆移动到圆环右下角,我们需要将top和left属性的值分别设置为calc(50% 原圆直径一半)。
这里以圆环直径200px为例,所以top的值为calc(50% - 70px),left的值为calc(50% + 70px)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。