近日來，“五環”成為了熱議的話題。CSS作為一種前端開發語言，在繪制圖像上也表現出了其獨特的魅力。接下來，我們就來看看如何使用CSS來畫出五環。

/**
 * CSS實現五環  
 * 作者：[你的名字]
 */
.outer-circle {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
border: 2px solid #3f3f3f;
}
.inner-circle-1 {
position: relative;
left: -100px;
top: 50px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #0072C6;
border: 2px solid #3f3f3f;
}
.inner-circle-2 {
position: relative;
left: 20px;
top: -70px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #EF3E35;
border: 2px solid #3f3f3f;
}
.inner-circle-3 {
position: relative;
left: -60px;
top: -70px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #FDB813;
border: 2px solid #3f3f3f;
}
.inner-circle-4 {
position: relative;
left: 60px;
top: -70px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #00A651;
border: 2px solid #3f3f3f;
}
.inner-circle-5 {
position: relative;
left: -20px;
top: -140px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #662D91;
border: 2px solid #3f3f3f;
}

上述代碼中，我們首先定義了一個外部的圓形容器，即.outer-circle。其寬高均為200px，并且將邊框設置為2px的黑邊框。接下來定義了五個圓形容器.inner-circle-*，并分別添加相應的樣式。我們利用position屬性來對其進行定位，并設置其背景顏色和邊框。

當然，你也可以通過改變顏色、位置和大小等值，來繪制屬于你自己的五環圖案。