心形圖案是一種很受歡迎的設計元素，為網頁添加了浪漫和熱情。在CSS中創建心形圖案并不難，但是如果要實現帶邊框的版本，則需要一些技巧。在此，我們將學習如何使用CSS來創建一個帶邊框的心形圖案。

.border-heart {
position: relative;
width: 100px;
height: 90px;
border: 7px solid #F00;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
}
.border-heart::before,
.border-heart::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #F00;
border-radius: 50%;
transform: translate(-25px, 0) rotate(-45deg);
}
.border-heart::before {
top: -29px;
}
.border-heart::after {
top: 29px;
}

讓我們逐行分析上面的代碼。首先，我們創建一個元素，并設置其相對定位，以便后面使用偽元素（::before和::after）來創建心形的左右兩側。

接下來，我們設置這個元素的寬度和高度。要讓它看起來像一個心形，我們設置高度為90px，寬度為100px。然后，我們添加7像素的紅色邊框，以便我們能夠看到形狀的輪廓。

接下來，我們設置四個圓角，以便我們創建一個完整的心形。我們設置左右兩側的圓角為50px，上方的圓角為0，這樣就可以創建一個像心形一樣的形狀。然后，我們使用transform: rotate(-45deg)將它旋轉45度，以便它看起來更像一個心形。

接下來，我們使用::before和::after偽元素創建左右兩側的形狀。我們首先設置其內容為空字符串，然后將其定位為絕對位置。我們使用inherit將其寬度和高度設置為與父類相同。然后，我們設置它們的背景顏色為紅色，并設置50%的圓角來創建一個圓形的形狀。

最后，我們使用transform: translate(-25px, 0) rotate(-45deg)將它們移動到左右兩側，并旋轉45度。我們使用top屬性設置它們的位置，以便它們位于正確的高度。

通過使用上面的代碼，您可以創建一個帶邊框的心形圖案。您可以進一步修改這個代碼來改變顏色、大小和形狀，以適應您的設計需求。