CSS可以設計出很多有趣的樣式，其中之一就是可伸縮搜索框。這種搜索框可以隨著用戶輸入的文字量不同而自動調整大小，讓頁面更加美觀、簡潔。

要實現可伸縮搜索框，我們首先需要在HTML中創建搜索框的標簽，然后使用CSS樣式來實現伸縮功能。

<div class="search-box">
<input type="text" class="search-input" placeholder="Search">
</div>

在CSS中，我們需要使用box-sizing屬性來設置元素盒模型的尺寸計算方式，將其設置為border-box，然后再根據輸入框的狀態來調整它的寬度。

.search-box {
width: 300px;
height: 40px;
display: flex;
align-items: center;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 0 10px;
transition: width 0.3s ease;
}
.search-input {
width: 100%;
height: 100%;
font-size: 16px;
border: none;
outline: none;
box-sizing: border-box;
}
.search-input:focus {
width: 400px;
}

在上述代碼中，我們設置了搜索框的初始寬度為300px，高度為40px，并使用flex布局來使輸入框居中。同時，我們設置了元素的邊框和內邊距，并將box-sizing屬性設置為border-box，以使尺寸計算更加準確。

接著，我們設置了輸入框的初始寬度為100%，高度為100%，這樣在初始狀態下輸入框會占據整個搜索框的空間。并且我們使用了:focus偽類來在用戶點擊輸入框時，將其寬度調整為400px，實現搜索框的伸縮效果。

最后，我們使用了transition屬性來設置搜索框寬度變化的過渡動畫，使效果更加平滑、自然。

這樣，我們就成功實現了一個簡單的可伸縮搜索框。如果您需要使用這種搜索框，可以根據自己的需要進行進一步的樣式調整和功能開發。