同心圓是指多個圓形或環形位于同一中心，構成一種具有美感和幾何感的圖形。在網頁設計中，同心圓的運用可以起到很好的裝飾作用。下面將介紹使用CSS來實現同心圓的方法。

.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代碼實現了一個同心圓。首先在HTML中創建一個外層容器，并設置其為flex布局，使得內部元素居中。然后分別創建多個圓形元素，設置其為絕對定位并使用border-radius屬性將其變為圓形，通過不同的背景顏色和寬高來實現同心效果。其中，圓形元素的大小與顏色可以根據實際需求進行調整。