CSS是一種用于網頁排版的語言，雖然不是那么容易掌握，但是掌握了它的精髓，就能讓網頁看起來更加優雅。下面我們來學習如何使用CSS畫一顆心。

.heart {
width: 30px;
height: 30px;
position: relative;
margin: 20px auto;
transform: rotate(-45deg);
cursor: pointer;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
position: absolute;
}
.heart:before {
width: 30px;
height: 30px;
top: -15px;
left: 0;
}
.heart:after {
width: 30px;
height: 30px;
top: 0;
left: 15px;
}
HTML代碼：

通過給HTML元素添加一個名為“heart”的類，使用CSS來定義這個類的樣式，就能畫出一顆心形圖案。需要注意的地方是調整兩個小圓點的位置，讓它們在45度的角度上和主圓的邊緣相切。這里用到的是CSS3的動畫屬性，讓心形變得更加立體感強烈，同時添加鼠標指針的修改效果，讓用戶在瀏覽網站時，能夠更好地感受到頁面的交互性。