同心圓是指多個(gè)圓形或環(huán)形位于同一中心，構(gòu)成一種具有美感和幾何感的圖形。在網(wǎng)頁(yè)設(shè)計(jì)中，同心圓的運(yùn)用可以起到很好的裝飾作用。下面將介紹使用CSS來實(shí)現(xiàn)同心圓的方法。

.concentric-circles {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.circle {
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
}
.circle-1 {
background-color: #ffdd67;
}
.circle-2 {
background-color: #ff9f4d;
height: 85%;
width: 85%;
}
.circle-3 {
background-color: #ff6b6b;
height: 70%;
width: 70%;
}
.circle-4 {
background-color: #fda085;
height: 55%;
width: 55%;
}
.circle-5 {
background-color: #f6d365;
height: 40%;
width: 40%;
}
.circle-6 {
background-color: #f26419;
height: 25%;
width: 25%;
}

以上CSS代碼實(shí)現(xiàn)了一個(gè)同心圓。首先在HTML中創(chuàng)建一個(gè)外層容器，并設(shè)置其為flex布局，使得內(nèi)部元素居中。然后分別創(chuàng)建多個(gè)圓形元素，設(shè)置其為絕對(duì)定位并使用border-radius屬性將其變?yōu)閳A形，通過不同的背景顏色和寬高來實(shí)現(xiàn)同心效果。其中，圓形元素的大小與顏色可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。