CSS3是一種網(wǎng)站設(shè)計(jì)中常用的語(yǔ)言，它可以賦予網(wǎng)站更多樣化的效果。今天，我們將學(xué)習(xí)如何使用CSS3來(lái)加載冬瓜。

.donggua {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to top, #f7d9a8, #ffe9ad);
position: relative;
}
.donggua:before {
content: "";
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px #fff;
}
.donggua:after {
content: "";
width: 140px;
height: 140px;
border-radius: 50%;
background: linear-gradient(to top right, #1b1b1b, #333, #1b1b1b);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px #222;
z-index: -1;
}

通過(guò)上述代碼，我們可以看到，我們首先設(shè)定了冬瓜的寬高和邊緣曲率。接著，我們使用漸變色來(lái)填充冬瓜的內(nèi)部，使其看起來(lái)更像一個(gè)真正的冬瓜。我們還設(shè)定了一個(gè)圓形白色塊作為冬瓜的中心點(diǎn)，并在上面添加了一層陰影。最后，我們添加了一個(gè)內(nèi)部背景色漸變的圓形，使冬瓜看起來(lái)更有立體感。

現(xiàn)在，我們只需要在HTML文件中添加以下代碼即可使用這個(gè)樣式：

<div class="donggua"></div>

通過(guò)這種使用CSS3的方法，我們可以輕松地為我們的網(wǎng)站添加更多樣化、有趣的效果，使之更具吸引力。