草地是自然界中常見的景象，而在CSS3中，我們也可以通過簡單的代碼實現草地的效果。

.grass {
background-color: #6bbf47;
background-image: linear-gradient(to bottom, #6bbf47, #5aad3b);
border-radius: 50%;
width: 300px;
height: 200px;
box-shadow: 0 0 0 10px #6bbf47;
}

通過上述代碼，我們定義了一個類名為grass的元素，利用線性漸變設置了綠色的背景色，在背景色上疊加了一個帶圓角的半徑為50%的背景圖，從而實現了圓形的草地的效果。

.grass:before {
content: '';
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
border-top: 20px solid #5aad3b;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50%;
}
.grass:after {
content: '';
position: absolute;
bottom: -10px;
right: 50%;
margin-right: -5px;
border-bottom: 20px solid #5aad3b;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50%;
}

接下來，我們利用:before和:after偽類分別在草地的頂部和底部構造兩個類似三角形的形狀，實現了更為自然的草地效果。

除此之外，我們還可以通過CSS3的動畫效果，讓草地更有生命力。

@keyframes sway {
from {
transform: rotate(0deg);
}
to {
transform: rotate(10deg);
}
}
.grass {
animation: sway 1s ease-in-out infinite alternate;
}

通過定義一個名為sway的動畫，設置了草地的旋轉效果，并通過animation屬性將動畫效果應用到草地類中。

綜上所述，通過簡單的CSS3代碼，我們可以輕松實現自然生動的草地效果，為網頁設計增添生氣。