css画个小圆圈外面套个空心圆
时间: 2024-10-18 21:02:07 浏览: 26
实现CSS圆环的5种方法(小结)
要使用CSS创建一个小圆圈外面套着一个空心圆,你可以使用`border-radius`属性结合`:before`和`:after`伪元素来实现。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.circle-container {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc; /* 内层圆的颜色 */
}
.circle-container::before,
.circle-container::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%; /* 空心圆半径小于内圆半径 */
height: 80%;
border-radius: 50%;
border: 2px solid #fff; /* 空心圆边框颜色 */
}
.circle-container::before {
margin-top: -40%; /* 上移外边缘,使空心圆上边缘位于内圆中心 */
box-sizing: border-box;
}
.circle-container::after {
margin-top: -60%; /* 上移更远,使空心圆完全覆盖内圆 */
}
</style>
</head>
<body>
<div class="circle-container"></div>
</body>
</html>
```
在这个例子中,`.circle-container`包含了一个内层的实心圆,而`:before`和`:after`伪元素则创建了外部的空心圆。通过调整内外圆的尺寸和位置,可以得到所需的外观。
阅读全文