CSS容器特效是網頁中常見的前端設計技巧。有許多有趣的效果可供開發人員選擇，如裝滿水的容器效果。

.container{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #F7F8F9;
position: relative;
overflow: hidden;
border-radius: 5px;
}
.water{
position: absolute;
width: 200px;
height: 0px;
bottom: 0;
-webkit-animation: water 5s infinite ease-in-out;
animation: water 5s infinite ease-in-out;
transform-origin: center bottom;
background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%);
}
@keyframes water {
0% {
transform: rotate(-3deg);
height: 0px;
}
50% {
transform: rotate(3deg);
height: 200px;
}
100% {
transform: rotate(-3deg);
height: 0px;
}
}

以上為CSS代碼，該容器特效的關鍵在于水槽內嵌套的水的div樣式，我們可以設置其位置為絕對定位，并使用animation屬性、transform屬性、和background屬性來使水具有動畫效果。通過這種設置，我們可以為網頁增添許多有趣的裝飾效果，讓用戶體驗更加自然和流暢。