css3 圆形里面多个点
时间: 2023-09-08 22:10:52 浏览: 23
如果您想在一个圆形内添加多个点,可以使用伪元素和圆形的 border-radius 属性来实现。以下是一个示例样式代码:
```css
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
position: relative;
}
.circle::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #000;
position: absolute;
top: 25%;
left: 75%;
transform: translate(-50%, -50%);
}
```
在这个例子中,我们创建了一个圆形元素 `.circle`,并使用 `::before` 和 `::after` 伪元素来添加两个点。这些点都是绝对定位的,其中一个在圆形的中心,另一个在圆形的右上角。您可以根据需要添加更多的点,并调整它们的位置和样式。