css3画同心圆 |css引入新字体

css堆叠标签，关于css的字体，css给奇数加border，CSS hover上去出现边框，css取消默认行间距，css基础教程入门书籍，css引入新字体 css3画同心圆 |css引入新字体

.container {
height: 300px;
position: relative;
}
.circle {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 200px;
height: 200px;
border: 20px solid #f3f3f3;
}
.circle-2 {
width: 160px;
height: 160px;
border: 20px solid #3498db;
}
.circle-3 {
width: 120px;
height: 120px;
border: 20px solid #e74c3c;
}

如上所示，首先在HTML中创建容器和几个圆形元素，然后使用CSS3的border-radius属性将圆形元素的角度设置为50%。接下来，通过position属性和transform属性将圆形元素居中，使它们在容器中看起来是同心圆。最后，将每个圆形元素的宽度、高度和边框属性进行调整，实现三个不同颜色的同心圆。

这是一种简单而有效的方法来绘制同心圆，在您的下一个项目中可以使用它来提高网站的视觉吸引力。