在CSS中，我們可以使用position: absolute;和transform: rotate();屬性將元素分布在圓上，以下是一個簡單的示例，展示如何將一個元素分布在圓上：

我們需要創(chuàng)建一個圓形容器，可以使用border-radius: 50%;屬性將元素分布在圓上，我們可以將需要分布的元素***定位到圓形容器中，并使用transform: rotate();屬性將元素旋轉(zhuǎn)到合適的位置。

HTML代碼：

<div class="circle-container">
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
  <div class="circle-item"></div>
</div>

CSS代碼：

.circle-container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.circle-item {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #f00;
}
.circle-item:nth-child(1) { transform: rotate(0deg); } /* 將***個元素放在圓上 */
.circle-item:nth-child(2) { transform: rotate(30deg); } /* 將第二個元素放在圓上 */
.circle-item:nth-child(3) { transform: rotate(60deg); } /* 將第三個元素放在圓上 */
.circle-item:nth-child(