css3 圆形里面多个点
时间: 2023-09-08 10:10:52 浏览: 106
您可以使用伪元素和border-radius属性来创建圆形,并通过设置圆点的位置来添加多个点。以下是一个示例代码:
```html
<div class="circle">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
```
```css
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
position: relative;
}
.dot {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%);
}
.dot:nth-child(1) {
top: 30%;
left: 30%;
}
.dot:nth-child(2) {
top: 70%;
left: 30%;
}
.dot:nth-child(3) {
top: 50%;
left: 70%;
}
```
这个示例中,我们首先创建了一个圆形的div容器,并使用border-radius属性将其变成圆形。然后,我们在容器内部添加了三个用于表示圆点的span元素,并使用绝对定位将它们放置在不同的位置。最后,我们使用transform属性将圆点居中。