CSS的水滴效果是一種非常有趣的效果，通過對元素的邊框和偽元素進行一些處理，就可以讓它看起來像是一個水滴或是露珠，下面我們一起來看一下具體實現方法。

.drop {
position: relative;
width: 100px;
height: 150px;
margin: 50px auto;
border-radius: 50%;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
.drop:before {
content: "";
position: absolute;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 50%;
z-index: -1;
}

首先，我們需要一個圓形的元素，這里我使用了一個div，并設置了它的border-radius屬性為50%。接著，我們給它設置了一些樣式，例如寬度、高度、邊框、背景色以及一些陰影效果。

接下來，我們需要畫出水滴的形狀。這里我使用了偽元素:before，并設置content屬性為空，以便生成一個空元素。然后，我們將它的寬度設置為60%，高度設置為80%，并將它放置到父元素的中心位置。我們再給它一個圓形的border-radius屬性，并將z-index屬性設置為-1，以便讓它顯示在父元素的下方。

最后，我們只需要通過控制偽元素的形狀和位置，就可以調整水滴的形態，從而達到不同的效果。