CSS圓圈重疊在頁(yè)面設(shè)計(jì)中經(jīng)常會(huì)用到，它可以給頁(yè)面增添一定的藝術(shù)美感和吸引力，在實(shí)現(xiàn)過程中需要借助border-radius屬性，下面我們一起了解一下吧。

/*定義圓圈的樣式*/
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
/*下面是使用圓圈重疊的實(shí)現(xiàn)方法*/
/*1.使用絕對(duì)定位來重疊*/
.circle1 {
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
.circle2 {
background-color: blue;
position: absolute;
top: 75px;
left: 75px;
}
/*2.使用負(fù)margin來重疊*/
.circle3 {
background-color: green;
margin: -25px 0 0 -25px; /*圓的直徑為50px,所以margin需要設(shè)為25px*/
}
.circle4 {
background-color: yellow;
margin: -10px 0 0 -10px; /*圓的直徑為20px,所以margin需要設(shè)為10px*/
}

如上述代碼所示，我們可以定義一個(gè).circle類，設(shè)置它的border-radius屬性值為50%，即可識(shí)別成圓形，然后使用不同的background-color屬性值來區(qū)分各個(gè)圓圈，最后通過position和margin來實(shí)現(xiàn)圓圈的重疊效果，而且這種方法還可以與其他的CSS樣式屬性進(jìn)行結(jié)合，來實(shí)現(xiàn)更加豐富的效果。