CSS心形圖標是Web設計中常用的圖標之一，具有浪漫、溫馨的設計效果。下面我們來看一些CSS心形圖標的示例。

1. 使用紅色填充的CSS心形圖標

.heart {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 12px;
height: 20px;
background: #f00;
border-radius: 20px 20px 0 0;
transform: rotate(-45deg);
}
.heart::before {
left: 0;
top: -8px;
}
.heart::after {
top: 0;
left: 10px;
}

2. 使用線框的CSS心形圖標

.heart {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
border: 2px solid #f00;
transform: rotate(-45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
display: block;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
transform: rotate(45deg);
}
.heart::before {
top: -13px;
}
.heart::after {
left: -13px;
}

3. 使用陰影的CSS心形圖標

.heart {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
box-shadow: inset 0 0 0 2px #f00;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
display: block;
width: 24px;
height: 24px;
background: #f00;
border-radius: 50%;
transform: rotate(45deg);
}
.heart::before {
left: -12px;
}
.heart::after {
top: -12px;
}

總結：

CSS心形圖標是Web設計中非常常用的圖標，以上就是一些CSS心形圖標的示例，希望對大家有所幫助。我們可以根據實際需求，在CSS中調整相應的樣式，以實現更加精美的心形圖標效果。