HTML，CSS，Javascript在圈内创建圈子

我需要用HTML，CSS和Javascript互相制作圈子，点击一个按钮的可能性，它会自动添加另一个圆圈。新添加的圈子将是最外面的圈子。HTML，CSS，Javascript在圈内创建圈子

任何想法，我可以做到这一点？

2012-11-20 Tomzie

对于圆形，您需要将border-radius设置为足够大的值（通常，宽度和高度的最大值的一半以上）。

要添加一个更大的圆圈，您需要复制之前的圆圈，创建另一个较大的圆圈并将其复制到其中。这是一个jQuery代码片段，但您可以使用任何框架，甚至纯js：

var $container = $('#container'), 
    $previous_circles = $container.html() 

$container 
    .html('<div class="circle bigger_circle"></div>') 
    .find('.bigger_circle') 
    .append($previous_circles) 
    .end()

来源

2012-11-20 07:19:45

感谢您的回复。但是我应该怎么用css来做呢？圆circle_circle应该已经定义好了吗？我想我需要跟踪有多少个圈子已经显示在某个地方？ – Tomzie

是的，你可以在你的css中定义所有可能的圆圈，或者创建相对尺寸。即：.circle {display：block;宽度：100％;高度：100％;边界半径：50％; padding：20px} - 填充将确保内部圆圈更小。确保容器有宽度和高度。 –

对不起，忘了提及位置：绝对。这是样式：#container {width：500px;高度：500像素;保证金：0汽车;位置：相对; } .circle {border-radius：50％; border：1px solid＃000;位置：绝对; left：10px;顶部：10px;右：10px;底部：10px; } –

HTML，CSS，Javascript在圈内创建圈子

回答

相关问题