最近在學習CSS美化頁面，發現有一個很有趣的效果，就是將多個div以環形分布的方式排列起來。下面就來分享一下如何實現這個效果。

.circular-container {
width: 400px;
height: 400px;
position: relative;
margin: 0 auto;
}
.circular-item {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
background-color: #f2f2f2;
}
.circular-item-1 {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
.circular-item-2 {
transform: rotate(45deg) translateX(150px) rotate(-45deg);
}
.circular-item-3 {
transform: rotate(90deg) translateX(150px) rotate(-90deg);
}
.circular-item-4 {
transform: rotate(135deg) translateX(150px) rotate(-135deg);
}
.circular-item-5 {
transform: rotate(180deg) translateX(150px) rotate(-180deg);
}
.circular-item-6 {
transform: rotate(225deg) translateX(150px) rotate(-225deg);
}
.circular-item-7 {
transform: rotate(270deg) translateX(150px) rotate(-270deg);
}
.circular-item-8 {
transform: rotate(315deg) translateX(150px) rotate(-315deg);
}

首先，我們需要一個容器，設置寬高和定位方式為相對定位，以便后續絕對定位的子元素相對于它進行定位。然后，我們需要多個子元素，每個子元素都是一個圓形，定位方式為絕對定位。為了讓這些子元素以環形分布的方式排列，我們需要用到CSS3的transform屬性，并應用不同的rotate值和translateX值。這里我設置了8個子元素，因此要設置8個不同的transform樣式，分別控制每個子元素的位置和旋轉角度。

最后，我們只要在HTML中引入這個CSS樣式，然后將所有的子元素分別添加一個.circular-item的class，再分別添加不同的編號class.circular-item-1到.circular-item-8，就可以實現這個環形分布的效果了。