CSS3是現今Web頁面設計中一個非常重要的部分，在許多方面可以為頁面添加許多吸引人的效果。這其中，CSS3的繪圖功能更是為頁面裝點添彩。在這里，我們將介紹如何使用CSS3繪制五環圖標，讓我們開始吧。

.olympic-rings {
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
}
.olympic-rings:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.olympic-rings:after {
content: "";
position: absolute;
top: 35px;
left: 35px;
width: 230px;
height: 230px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.olympic-rings .ring {
display: block;
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
.blue {
top: calc(50% - 60px);
left: calc((50% - 120px) - 60px);
background: #1E90FF;
}
.black {
top: calc((50% - 120px) - 60px);
left: calc(50% - 60px);
background: #000000;
}
.red {
top: calc(50% - 60px);
left: calc((50% + 120px) - 60px);
background: #FF0000;
}
.yellow {
top: calc((50% + 120px) - 60px);
left: calc(50% - 60px);
background: #FFD700;
}
.green {
top: calc((50% - 60px) + 120px);
left: calc(50% - 60px);
background: #008000;
}

以上就是繪制五環所需的CSS代碼。通過CSS3的border-radius屬性，我們可以輕松地創建一個圓形，而box-shadow屬性則能夠創建出細微的陰影。之后，我們為五個圓形分別設置它們的顏色，并通過設定它們的位置和大小將它們放置在合適的位置上。最后，我們為整個圖標增加了一個白色背景和黑色陰影，這樣我們就制作出了漂亮的五環圖標。