[分享]css元素平均分布在圆上怎么弄

CSS元素平均分布在圆上可以通过小技巧实现。以下是实现方法和相关代码示例：

/* CSS */
.circle {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
}

.circle .element {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* HTML */
<div class="circle">
  <div class="element" style="top: 50%; left: 50%;"></div>
  <div class="element" style="top: 25%; left: 75%;"></div>
  <div class="element" style="top: 75%; left: 75%;"></div>
  <div class="element" style="top: 75%; left: 25%;"></div>
  <div class="element" style="top: 25%; left: 25%;"></div>
</div> 

以上CSS代码定义了一个宽高为400px的圆形容器，元素的样式为红色圆形。translate(-50%, -50%)可以让元素以中心为坐标点，并与之相交，从而使元素居中，而rotate(-90deg)则是将元素沿着圆周旋转90度，使得元素均匀地分布在圆周上。

以上HTML代码则是定义了5个元素，通过top和left属性定义它们在圆容器上的位置，这些位置均匀地分布在圆周上。其中第一个元素的top和left均为50%则在容器中居中，看起来比较自然。

以上方法适用于CSS3及以上版本，对浏览器的兼容性要求较高。如果要求兼容性较好，则可以使用JavaScript或jQuery实现。