如何用css，javascript创建一个圆圈？-Howtocreatecirclesaroundacirclewithcss,javascript?

14  

No one addressed the Javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and Javascript; it uses pure Javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:

没有人解决这个问题的Javascript方面。下面是一个完整的（虽然快速和脏）网页，将使用html，css3和Javascript在父圆圈的中心周围绘制6个完美间隔的圆圈;它使用纯Javascript，因此无需引用jquery库。你应该能够看到如何从代码中轻松提取方法来控制卫星圆的数量，它们与父母中心的距离，父和卫星半径，卫星偏移等：

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #ac5;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

14  

To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.

要制作圆，请使用border-radius：50％。然后只需放置6个圆形div，其位置为：绝对围绕较大的圆圈。

Kind of like this: http://jsfiddle.net/yxVkk/

有点像：http：//jsfiddle.net/yxVkk/

1  

Using css you can try something like that. but use circle tag of HTML5 will give you a better result.

使用CSS你可以尝试这样的东西。但是使用HTML5的圆形标签会给你一个更好的结果。

http://jsbin.com/etuzis/1/

http://jsbin.com/etuzis/1/

HTML

HTML

CSS

CSS

.div1{
  margin:40px 10px 10px 50px;
  position:relative;
  width:150px;
  height:150px;
  background-color:#ac5;
  border-radius:100px;
}
.div2{
  position:absolute;
  width:40px;
  height:40px;
  background-color:#ac5;
  border-radius:100px;
}

1  

Adding border-radius:50% to a

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;
}

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;

  position:absolute;
  top:50%;
  left:50%;
  margin-left:-5em;
  margin-top:-5em;
}

.little_circle {
  width:3em;
  height:3em;
  border-radius:50%;
  background-color:green;
  position:relative;
}

#little_one {
  bottom:1em;
  right:2em;
}

#little_two {
  bottom:6.5em;
  left:3.5em;
}

#little_three {
  bottom:7em;
  left:9em;
}

// etc...