CSS怎么畫個月牙？先來看看需要怎樣的樣式。

我們可以用一個半圓形和兩個長方形來模擬月牙的形狀。具體實現(xiàn)步驟如下：

/*設(shè)置容器的背景色*/
.container{
background-color: #ffffff;
}
/*設(shè)置月牙的形狀*/
.moon{
width: 100px;
height: 200px;
border-radius: 100px 0 0 100px;
background-color: #e0e0e0;
}
/*設(shè)置月牙的陰影效果*/
.moon:before{
content: "";
display: block;
width: 100px;
height: 200px;
border-radius: 100px 0 0 100px;
background-color: #ffffff;
position: absolute;
transform: translateX(16px);
box-shadow: -16px 0 0 0 #ffffff;
}
/*設(shè)置月牙的凸起效果*/
.moon:after{
content: "";
display: block;
width: 10px;
height: 200px;
background-color: #ffffff;
position: absolute;
transform: translate(85px, 0) rotate(45deg);
box-shadow: 0 -10px 0px 0px #ffffff;
}
/*兩個長方形分別是月牙的“腿”*/
.leg{
width: 50px;
height: 100px;
background-color: #e0e0e0;
position: absolute;
top: 140px;
left: 60px;
}

這里的CSS代碼使用了偽元素:before和:after來實現(xiàn)月牙凸起和陰影的效果，同時利用了transform屬性來進行旋轉(zhuǎn)和移動。通過這些細節(jié)的處理，能夠讓月牙看起來更加真實。

至此，我們就可以通過CSS創(chuàng)建一個漂亮的月牙了。如果你想要進一步練習(xí)CSS的繪圖能力，那么這篇文章還有很多好玩的例子可以去探索。