CSS3 的大圓套小圓功能可以讓我們輕松地實現(xiàn)一個大圓包含一個或多個小圓的效果，這在網(wǎng)頁設(shè)計中非常常見。下面我們來一起學(xué)習(xí)如何使用 CSS3 來實現(xiàn)這個效果。

.container {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}

首先，我們需要一個大圓作為容器，可以使用 CSS3 的 border-radius 屬性來設(shè)置元素為圓形，然后使用 flex 布局來讓元素垂直和水平居中。

接下來，我們再創(chuàng)建一個小圓，通過設(shè)置 width 和 height 相等并且 border-radius 屬性設(shè)置為 50% 來實現(xiàn)一個小圓形。在 HTML 中可以創(chuàng)建多個這樣的小圓，然后通過 CSS 來定位它們。

最后，我們把小圓放到大圓中央，可以使用相對定位或者絕對定位等方法來實現(xiàn)。下面是代碼：

<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>

如果我們想要讓小圓水平排列，只需要將容器設(shè)置為 flex 布局，并設(shè)置 justify-content 屬性為 space-between 或 space-around 即可。

使用 CSS3 的大圓套小圓功能，可以讓我們在網(wǎng)頁設(shè)計中實現(xiàn)各種有趣的效果，為網(wǎng)頁增加更多的互動和趣味性。大家可以嘗試在項目中使用這種技術(shù)，讓您的網(wǎng)站更具吸引力。