要使用CSS3來繪制四色圓環(huán)，我們需要用到偽元素:before和:after，以及CSS3的transform和animation屬性。

首先，我們需要為容器元素設(shè)置寬高，并將它的邊框顏色設(shè)置為透明。然后，我們可以用CSS3的transform屬性將容器元素的圓角邊框旋轉(zhuǎn)45度，使其變成一個菱形。代碼如下：

.container {
position: relative;
width: 200px;
height: 200px;
border-style: solid;
border-width: 30px;
border-color: transparent;
border-radius: 50%;
transform: rotate(45deg);
}

接下來，我們需要為容器元素添加四個偽元素:before和:after，并讓它們的尺寸和位置對稱。然后使用CSS3的border屬性，給偽元素添加圓角邊框，并將邊框顏色設(shè)置為我們需要的顏色。代碼如下：

.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotate(60deg);
}
/* 紅色 */
.container:before {
border-top: 30px solid red;
border-right: 30px solid transparent;
}
/* 黃色 */
.container:after {
border-top: 30px solid yellow;
border-right: 30px solid transparent;
transform: rotate(-60deg);
}

最后，我們可以通過添加animation屬性，使四個圓環(huán)旋轉(zhuǎn)起來。代碼如下：

.container:before,
.container:after {
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

完成后的CSS代碼如下：

.container {
position: relative;
width: 200px;
height: 200px;
border-style: solid;
border-width: 30px;
border-color: transparent;
border-radius: 50%;
transform: rotate(45deg);
}
.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotate(60deg);
animation: spin 4s linear infinite;
}
.container:before {
border-top: 30px solid red;
border-right: 30px solid transparent;
}
.container:after {
border-top: 30px solid yellow;
border-right: 30px solid transparent;
transform: rotate(-60deg);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

使用以上代碼，我們可以輕松實現(xiàn)一個漂亮的CSS3四色圓環(huán)效果。