CSS3作為前端技術的重要組成部分，不僅僅可以用來設置網站頁面的樣式，還可以創造出獨特的效果，比如這里要介紹的水壺澆水效果。

.kettle{
position: relative;
width: 150px;
height: 150px;
background-color: #fbfbfb;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.kettle-spout{
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 15px;
height: 50px;
background-color: #fff;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.water{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 0;
background-color: #8ed6ff;
border-radius: 50%;
transition: height 0.8s ease-in-out;
z-index: 1;
}
.kettle:hover .water{
height: 50%;
}

上面的代碼是實現水壺澆水效果的關鍵，首先是水壺的整體樣式，使用圓形盒子模型和陰影以及溢出隱藏來實現水彩效果，注意半徑設置為50%。

然后是水壺的噴嘴位置設置，通過絕對定位和transform來居中并實現斜角矩形形態。

最后是水彩的樣式設置，通過絕對定位和transform的平移來設置水彩初始位置，并且高度為0，然后通過hover狀態時設置水彩高度為50%來實現水壺澆水效果。

通過這些CSS3屬性的巧妙組合，實現了一個簡潔而又酷炫的水壺澆水效果。