在網頁設計中，搜索框是不可或缺的一個組件。它可以幫助用戶快速找到所需的信息。而CSS則是用于控制頁面樣式的一種語言。那么如何用CSS來設計一個漂亮的搜索框呢？

/* 首先，我們創建一個HTML結構 */
<div class="search-box">
<input type="text" placeholder="請輸入要搜索的內容">
<button>搜索</button>
</div>
/* 接著，我們為搜索框添加樣式 */
.search-box {
position: relative; /* 讓搜索框相對定位 */
display: flex; /* 設置為flex布局 */
align-items: center; /* 縱向居中對齊 */
}
/* 輸入框樣式 */
.search-box input {
height: 30px; /* 輸入框高度 */
width: 300px; /* 輸入框寬度 */
padding: 5px 10px; /* 上下邊距為5px，左右邊距為10px */
border: none; /* 去掉邊框 */
border-radius: 20px; /* 添加圓角 */
box-shadow: 0 0 5px #ddd; /* 添加陰影效果 */
outline: none; /* 去掉聚焦時的邊框 */
}
/* 搜索按鈕樣式 */
.search-box button {
height: 30px; /* 按鈕高度 */
width: 80px; /* 按鈕寬度 */
margin-left: -50px; /* 設置為負數，讓按鈕偏左 */
background: #f60; /* 添加背景色 */
color: #fff; /* 字體顏色為白色 */
border: none; /* 去掉邊框 */
border-radius: 15px; /* 添加圓角 */
box-shadow: 0 0 5px #f60; /* 添加陰影效果 */
cursor: pointer; /* 鼠標懸浮時變為手型 */
}

通過以上的CSS樣式，我們就可以實現一個簡單卻美觀的搜索框了。你可以根據自己的需求進行調整顏色、大小等屬性。當然，此處的CSS代碼只是其中一種實現方式，如果有更好的方式，歡迎分享。