参见英文答案 > Concentric circles with CSS 6个
我想在CSS中创建两个同心圆.内部的一个具有与外部宽度相当的指定宽度,例如. 50％.这些圈子应该是响应性的,它们应该适合所有屏幕.
我怎样才能做到这一点？我不喜欢使用position：absolute,javascript或jQuery.我认为这应该是可能的.
谢谢！
最佳答案
纯CSS：
#container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#circle {
position: absolute;
width: 50%;
height: 50%;
background-color: #000000;
border-radius: 50%;
}
#small-circle{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #e5e5e5;
border-radius: 50%;
}
和HTML：
见Demo
原文链接：https://www.f2er.com/css/427478.html