今天我們要學習的是一個粉紅色愛心的CSS。

.heart {
width: 10px;
height: 10px;
background-color: pink;
position: relative;
transform: rotate(45deg);
border-radius: 50%;
box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.3);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: pink;
}
.heart::before {
width: 10px;
height: 10px;
top: -5px;
left: 0;
border-radius: 50% 50% 0 0;
}
.heart::after {
width: 10px;
height: 10px;
top: 0;
left: -5px;
border-radius: 0 50% 50% 0;
}

讓我們來解析這段代碼。首先，我們創建了一個愛心的形狀，并將其進行了旋轉，得到了45度角的愛心。

接著，我們使用偽類選擇器::before和::after來創建愛心的兩個半邊。我們給它們都添加了一個背景顏色，并使用絕對定位來調整它們的位置。在::before偽類選擇器中，我們用到了border-radius屬性來使其變成拱形。在::after偽類選擇器中，我們將左上角和右下角設置為50%，實現拱形效果。

最后，在愛心中添加內陰影，使其看起來更加立體。這樣我們就成功的創建了一個可愛粉嫩的愛心圖案了。