CSS禪意花園是一個(gè)很有意思的網(wǎng)站，其中包含了很多用CSS實(shí)現(xiàn)的花園效果，我們可以從中學(xué)習(xí)到很多CSS的技巧。下面我們就來(lái)看看其中一個(gè)例子：

/* HTML代碼 */
<div class="garden">
<div class="flower">
<div class="petal left"></div>
<div class="petal right"></div>
</div>
</div>
/* CSS代碼 */
.garden {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #A1C181;
}
.flower {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
}
.petal {
width: 50px;
height: 80px;
position: absolute;
background-color: #F3D6E4;
border-radius: 25% 25% 0 0;
border: 5px solid #D3A3B3;
transform: rotate(45deg);
}
.left {
top: -40px;
left: -40px;
}
.right {
top: -40px;
right: -40px;
transform: rotate(135deg);
}

通過(guò)上面的代碼，我們可以得到一朵粉色的菊花，其實(shí)現(xiàn)方式非常巧妙。首先，我們用flex布局將整個(gè)花園垂直居中，使得我們的花朵能夠居中顯示。接下來(lái)，我們用圓形的div作為花朵的容器，并設(shè)定給div加上邊框陰影，形成花瓣的效果。然后我們使用絕對(duì)定位和transform旋轉(zhuǎn)來(lái)實(shí)現(xiàn)花瓣的位置和角度。最后，我們就得到了這朵禪意的菊花。