在網頁的設計中，收縮式搜索框是一個非常實用的功能。當用戶不需要使用搜索功能時，可以將搜索框收縮，以便頁面的設計更加簡潔，用戶的確認按鈕也更加明確。那么如何使用CSS實現這個功能呢？

.search-container {
position: relative;  /* 設置容器的位置 */
width: 200px;
}
.search-input {
width: 100%;  /* 設置搜索框的寬度 */
height: 30px;
padding: 5px;
border: none;
border-radius: 5px;
outline: none;
transition: all 0.3s ease;
}
.search-input:focus {
width: 300px;  /* 設置焦點時的寬度 */
}
.search-button {
position: absolute;  /* 設置按鈕的位置 */
right: 0;
top: 0;
width: 30px;
height: 100%;
background-color: #fff;
border: none;
border-radius: 0 5px 5px 0;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
}
.search-button:hover {
background-color: #f5f5f5;  /* 鼠標懸停時的樣式 */
}
.search-button i {
font-size: 20px;
}

以上是一個簡單的CSS樣式，實現了搜索框的收縮功能。可以看到，通過設置搜索框的寬度以及按鈕的位置，使用了CSS中的漸變效果來改變搜索框的寬度，實現了收縮效果。同時，點擊搜索按鈕時還可以實現自動聚焦，提升了用戶體驗。

搜索功能是網頁設計中一個非常重要的功能，實現搜索框的收縮功能可以讓頁面更加美觀，更加便于用戶操作。希望本文對你有所幫助！