水果是人們日常飲食中必不可少的一部分，無論是生吃還是加工，水果都能帶來美味和營養。而在網頁設計中，使用CSS模板可以為頁面添加趣味性和美觀度。下面介紹一些CSS模板中常用的水果效果。

/* 水果圖標 */
.icon-apple {
background-image: url("apple.png");
}
.icon-banana {
background-image: url("banana.png");
}
.icon-orange {
background-image: url("orange.png");
}
/* 水果背景 */
.fruit-bg {
background-image: url("fruit-bg.jpg");
background-size: cover;
background-position: center center;
}
/* 水果按鈕 */
.fruit-btn {
background-color: #f8bc58;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-weight: bold;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
/* 水果列表 */
.fruit-list {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.fruit-item {
margin: 10px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.fruit-item:hover {
box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
transform: scale(1.1);
}
/* 水果標題 */
.fruit-title {
font-size: 36px;
font-weight: bold;
text-align: center;
color: #f8bc58;
}

以上代碼展示了一些常用的水果效果，包括水果圖標、背景、按鈕、列表和標題等。通過CSS樣式的調整，可以為網頁添加更具吸引力的水果元素，讓用戶在瀏覽時感到愉悅和舒適。