CSS是網頁設計的重要組成部分，可以美化頁面并實現豐富的效果。本文將介紹如何使用CSS用div制作五環。

<div class="wrapper">
<div class="circle red"></div>
<div class="circle blue"></div>
<div class="circle yellow"></div>
<div class="circle black"></div>
<div class="circle green"></div>
</div>

首先，我們需要創建一個包含五個圓圈的父元素，并給它設置一個類名"wrapper"。然后用五個div分別表示五個圓圈，加上不同的背景顏色，分別命名為"circle red"、"circle blue"、"circle yellow"、"circle black"和"circle green"。

.wrapper{
width: 400px;
height: 400px;
margin: 0 auto;
}
.circle{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.red{
background-color: red;
transform: translate(-100px,0);
}
.blue{
background-color: blue;
transform: translate(-50%, 200px);
}
.yellow{
background-color: yellow;
transform: translate(50%, 200px);
}
.black{
background-color: black;
transform: translate(100px, 0);
}
.green{
background-color: green;
transform: translate(0, -200px);
}

接下來，我們為父元素"wrapper"設置寬度和高度，并添加margin屬性使它居中。對于五個圓圈，我們需要設置它們的寬度和高度，邊框半徑為50%使它們呈現圓形。通過設置position屬性和top、bottom、left、right和margin屬性的值，我們將五個圓圈放置在父元素中心。最后，我們為每個圓圈添加不同的背景顏色，并為它們設置不同的transform屬性值來定位它們的位置，從而呈現五環的效果。

通過以上方式，我們成功用CSS用div制作了五環，這為我們在網頁設計中實現更加豐富的效果提供了參考。