CSS是一種強大的樣式表語言，許多設計師和開發者使用它來美化網頁。本文將介紹如何使用CSS創建一個連環愛心。

.heart1 {
position: relative;
width: 100px;
height: 100px;
border-radius: 50% 50% 0 0;
background-color: #f00;
transform: rotate(-45deg);
}
.heart1::before,
.heart1::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background-color: inherit;
}
.heart1::before {
top: -50px;
}
.heart1::after {
left: -50px;
transform: rotate(90deg);
}

首先，我們定義一個類名為“heart1”的元素，它的寬度和高度都為100px，并且使用了50%的圓角來定義其形狀。背景顏色為#f00（紅色），并且使用transform屬性將其旋轉-45度。

接下來，使用偽類“::before”和“::after”來定義連環效果。因為這兩個偽類都是絕對定位的，所以它們的寬度和高度和父元素相同，也使用了相同的圓角和背景顏色。

偽類“::before”位于父元素的頂部，并且它的top屬性值為負數，所以它在父元素的上方。偽類“::after”位于父元素的左側，并且使用了rotate屬性使其旋轉90度，這樣就形成了連環的效果。

在使用上述代碼后，就可以得到一個美麗的連環愛心。如果需要更多的樣式或效果，可以添加更多的CSS屬性或類名來擴展它。