CSS3是一個(gè)強(qiáng)大的工具，它能夠幫助我們編寫出精美的網(wǎng)頁(yè)。今天我們來(lái)學(xué)習(xí)一下如何使用CSS3編寫香蕉代碼。

.banana {
background: linear-gradient(45deg, #fc0 0%, #fc0 50%, #fb5 50%);
border-radius: 50% 50% 0 0/60% 60% 0 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
height: 120px;
margin: 50px auto 0;
position: relative;
width: 80px;
z-index: 1;
}
.banana:before {
background: #fb5;
border-radius: 50%;
content: "";
height: 80%;
left: 10%;
position: absolute;
top: -40%;
width: 80%;
z-index: -1;
}
.banana:after {
background: #fc0;
border-radius: 50%;
content: "";
height: 80%;
left: 10%;
position: absolute;
top: -40%;
width: 80%;
z-index: -1;
transform: rotate(-15deg) scale(1.1, 0.8);
}

上面這段代碼使用了各種CSS3的新特性，其中包括了漸變背景、圓角、陰影、偽元素等等。通過(guò)這些特性，我們可以輕松地構(gòu)建出一個(gè)非常逼真的香蕉。

如果你想要進(jìn)一步了解CSS3，還有很多其他的特性等待你去探索，比如動(dòng)畫、變形、過(guò)渡等等。希望你能夠更好地利用CSS3，打造出更加出色的網(wǎng)頁(yè)。