CSS3 的大圓套小圓功能可以讓我們輕松地實現一個大圓包含一個或多個小圓的效果，這在網頁設計中非常常見。下面我們來一起學習如何使用 CSS3 來實現這個效果。

.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 屬性來設置元素為圓形，然后使用 flex 布局來讓元素垂直和水平居中。

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

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

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

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

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