CSS是層疊樣式表的縮寫，它是網(wǎng)頁設計中不可或缺的一部分。要想寫出一個漂亮的網(wǎng)頁，掌握CSS是必要的。今天我們來學習如何用CSS寫出一個可愛的桃心。

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

首先，我們創(chuàng)建一個div元素，并為其添加一個類名“heart”。

<div class="heart"></div>

接下來，我們使用CSS樣式來為心形添加特效。我們使用偽元素:before和:after來產(chǎn)生左右兩邊的半圓形，然后通過調(diào)整它們的位置使之形成心形。

讓我們來看一下CSS代碼的具體解釋。我們將心形的寬度設為100像素，高度設為80像素，并通過position:relative使得偽元素的位置可以和“heart”元素聯(lián)系起來。transform:rotate(-45deg)使“heart”元素朝向左上方傾斜45度。接下來，我們使用偽元素創(chuàng)建兩個半圓形，設置它們的寬、高和背景顏色，并通過position:absolute將它們與“heart”元素結合。最后，我們通過border-radius屬性設置半圓形的左上和右上角為50%，讓其形成半圓形的效果。

最終，我們就成功地用CSS寫出了一個可愛的心形。你也可以嘗試更改它的大小和位置，看看它會變成什么樣子。