圓疊加是一項常用的CSS3技術。通過圓形遮罩來實現將兩個元素的形狀與顏色融合，讓它們看起來像是一個整體。

圓疊加效果通常使用以下步驟：

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
/* 創建遮罩層 */
.mask {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1; /* 遮罩層 z-index 最好大于下面的圓 */
}
/* 圓形內容 */
.content {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: relative;
z-index: 0;
}

在這個示例中，.circle 是用于創建圓形的基本樣式類。.mask 類定義了一個紅色的遮罩層，而 .content 類包含實際要顯示的內容。

通過將遮罩層與 .content 組合使用，我們可以創建一個看起來像是一個整體的圓形元素。遮罩層可以用來強調元素的形狀或顏色，或者用于其他視覺效果。

在實際應用中，您可能需要微調圓疊加效果的參數以達到最佳效果。您可以更改遮罩層的顏色、大小和位置，或者更改 .content 元素的樣式。

.circle {
/* 更改圓的大小并定位到屏幕中心 */
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 更改遮罩層的顏色和大小，并將它定位在右上角 */
.mask {
width: 80px;
height: 80px;
background-color: green;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
/* 更改圓形內容的顏色，并調整它的位置 */
.content {
width: 200px;
height: 200px;
background-color: purple;
border-radius: 50%;
position: relative;
z-index: 0;
top: -20px;
}

上述示例演示了如何更改圓形的大小和位置以及遮罩層和圓形內容的顏色。

總之，圓疊加是一項非常有用的CSS3技術，可以讓您創建非常獨特的網頁元素。如果您希望嘗試此技術，請嘗試使用我們提供的代碼片段，并進行調整以適合您的項目。