CSS 卡片間曲線連接是一種常用的 Web 設計技巧，它可以給網頁增添一些有趣的視覺效果。下面我們來看一下如何使用 CSS 實現卡片間曲線連接。

.card {
position: relative;
width: 200px;
height: 250px;
background-color: #FFF;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
.curve {
position: absolute;
top: -30px;
left: -30px;
width: 60px;
height: 60px;
background-color: #FFF;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
transform: rotate(45deg);
}
.curve:before,
.curve:after {
content: '';
position: absolute;
top: -5px;
left: 30px;
width: 60px;
height: 10px;
background-color: #FFF;
transform: rotate(-45deg);
}
.curve:after {
top: 35px;
}

首先，我們需要創建一個容器元素，用來包含卡片以及卡片間的曲線連接。這個容器元素需要設置position: relative;，用來控制曲線連接的位置。

接下來，我們創建一個橢圓形元素，用來作為曲線連接的主體。這個橢圓形元素需要設置position: absolute;、top: -30px;、left: -30px;，并且還需要設置width: 60px;、height: 60px;，用來控制曲線連接的大小和位置。為了讓橢圓形元素旋轉，我們需要設置transform: rotate(45deg);。

最后，我們需要創建兩個小矩形元素，用來作為曲線連接的兩個端點。這兩個小矩形元素需要分別設置content: '';、position: absolute;、width: 60px;、height: 10px;、background-color: #FFF;，并且還需要設置transform: rotate(-45deg);，用來控制小矩形元素的旋轉角度。其中，一個小矩形元素需要設置top: -5px;、left: 30px;，另一個小矩形元素需要設置top: 35px;、left: 30px;，用來控制小矩形元素的位置。

當我們將多個這樣的卡片通過 CSS 連接起來時，就可以實現卡片間的曲線連接了。