CSS 心形圖案在網頁設計中是非常常見的，可以為頁面添加一些浪漫與感性的元素。在這里，我們為大家提供一些常用的 CSS 心形圖案，讓您更快速地實現網頁設計。

/* 簡單的心形 */
.heart {
width: 20px;
height: 20px;
background-color: red;
transform: rotate(-45deg);
}
/* 漸變色心形 */
.heart {
width: 20px;
height: 20px;
background-image: linear-gradient(to bottom right, red, yellow);
transform: rotate(-45deg);
}
/* 陰影效果心形 */
.heart {
width: 20px;
height: 20px;
background-color: #e74c3c;
position: relative;
}
.heart:after,
.heart:before {
content: "";
position: absolute;
top: -10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #e74c3c;
border-radius: 15px 15px 0 0;
transform: rotate(-45deg);
}
.heart:after {
top: 10px;
left: -10px;
}
/* 圖片心形 */
.heart {
width: 20px;
height: 20px;
background-image: url(heart.png);
background-size: cover;
}

以上是一些常用的 CSS 心形圖案，可以根據自己的需求進行自由的修改。編寫出美觀的網頁設計，不僅需要好的想法，還需要熟練掌握常用的 CSS 代碼，實現您的設計想法。