水玻璃瓶是很多網站設計中經常用到的效果，使用CSS可以輕松實現。下面就讓我們看看如何做出一個水玻璃瓶吧。

.glass {
position: relative;
width: 100px;
height: 150px;
border: 2px solid #ccc;
border-radius: 50% / 10%;
overflow: hidden;
}
.glass:before {
content: "";
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background-image: radial-gradient(circle at center, transparent, rgba(255, 255, 255, 0.5));
transform: rotate(45deg);
filter: blur(10px);
}
.glass:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent);
filter: blur(20px);
}

首先，我們需要創建一個含有white的背景色的div，用于實現“玻璃”的效果。然后，我們可以通過添加偽元素:before和:after，利用CSS實現瓶中水的效果。

偽元素:before可以模擬出瓶外的光線，利用radial-gradient實現。加上filter的模糊效果，讓這個“光線”看起來更真實。

偽元素:after則模擬了瓶中的水，同樣利用radial-gradient實現。由于水的透明度不一，我們可以使用rgba()函數設置不同透明度的顏色，從而實現更加真實的效果。

最后，調整border-radius與瓶子的高度寬度比例，就可以達到一個非常逼真的水玻璃瓶效果了。這種效果既適用于產品展示界面，也適用于博客、個人網站等網頁設計當中。