CSS是網(wǎng)頁設(shè)計(jì)的重要組成部分，可以美化頁面并實(shí)現(xiàn)豐富的效果。本文將介紹如何使用CSS用div制作五環(huán)。

<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>

首先，我們需要?jiǎng)?chuàng)建一個(gè)包含五個(gè)圓圈的父元素，并給它設(shè)置一個(gè)類名"wrapper"。然后用五個(gè)div分別表示五個(gè)圓圈，加上不同的背景顏色，分別命名為"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);
}

接下來，我們?yōu)楦冈?wrapper"設(shè)置寬度和高度，并添加margin屬性使它居中。對于五個(gè)圓圈，我們需要設(shè)置它們的寬度和高度，邊框半徑為50%使它們呈現(xiàn)圓形。通過設(shè)置position屬性和top、bottom、left、right和margin屬性的值，我們將五個(gè)圓圈放置在父元素中心。最后，我們?yōu)槊總€(gè)圓圈添加不同的背景顏色，并為它們設(shè)置不同的transform屬性值來定位它們的位置，從而呈現(xiàn)五環(huán)的效果。

通過以上方式，我們成功用CSS用div制作了五環(huán)，這為我們在網(wǎng)頁設(shè)計(jì)中實(shí)現(xiàn)更加豐富的效果提供了參考。