CSS圓等分是CSS布局中的一種技巧，可以讓一個(gè)圓形區(qū)域分成任意數(shù)量的相等部分。在實(shí)際的應(yīng)用中，你可能會(huì)用到這個(gè)技巧來制作進(jìn)度條、導(dǎo)航菜單、分級(jí)評(píng)分等等。

.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: #74c7b8;
overflow: hidden;
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.circle span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: #ffffff;
transform-origin: bottom;
}
.circle span:nth-child(1) {
transform: rotate(0deg);
}
.circle span:nth-child(2) {
transform: rotate(30deg);
}
.circle span:nth-child(3) {
transform: rotate(60deg);
}
.circle span:nth-child(4) {
transform: rotate(90deg);
}
.circle span:nth-child(5) {
transform: rotate(120deg);
}
.circle span:nth-child(6) {
transform: rotate(150deg);
}
.circle span:nth-child(7) {
transform: rotate(180deg);
}

在上面的代碼中，我們定義了一個(gè)class為.circle的樣式，它表示一個(gè)寬高相等并且已經(jīng)設(shè)置了border-radius為50%的圓形區(qū)域。然后，我們?cè)O(shè)置了這個(gè)區(qū)域的padding-top為100%，這樣我們就可以在它的內(nèi)部定義任意數(shù)量的元素。接下來，我們定義了一個(gè)偽元素:before，用來保持.circle元素的縱橫比例。最后，我們定義了.circle內(nèi)的每一個(gè)子元素，用于等分這個(gè)圓形區(qū)域。由于border-radius為50%，所以每個(gè)子元素的高度都是父元素的一半，旋轉(zhuǎn)一個(gè)子元素后，就可以形成一個(gè)相鄰兩個(gè)子元素之間的等分角度。

使用這個(gè)樣式的時(shí)候，只需要在.circle元素內(nèi)部添加多個(gè)span元素即可。如果需要更多的等分角度，只需要在CSS中添加對(duì)應(yīng)的樣式就可以了。這種圓等分的實(shí)現(xiàn)，不僅簡(jiǎn)單明了，而且可以兼容所有現(xiàn)代瀏覽器，是一種非常實(shí)用的CSS技巧。