在網(wǎng)頁(yè)設(shè)計(jì)中，搜索框是不可或缺的一個(gè)組件。它可以幫助用戶快速找到所需的信息。而CSS則是用于控制頁(yè)面樣式的一種語(yǔ)言。那么如何用CSS來(lái)設(shè)計(jì)一個(gè)漂亮的搜索框呢？

/* 首先，我們創(chuàng)建一個(gè)HTML結(jié)構(gòu) */
<div class="search-box">
<input type="text" placeholder="請(qǐng)輸入要搜索的內(nèi)容">
<button>搜索</button>
</div>
/* 接著，我們?yōu)樗阉骺蛱砑訕邮?*/
.search-box {
position: relative; /* 讓搜索框相對(duì)定位 */
display: flex; /* 設(shè)置為flex布局 */
align-items: center; /* 縱向居中對(duì)齊 */
}
/* 輸入框樣式 */
.search-box input {
height: 30px; /* 輸入框高度 */
width: 300px; /* 輸入框?qū)挾?*/
padding: 5px 10px; /* 上下邊距為5px，左右邊距為10px */
border: none; /* 去掉邊框 */
border-radius: 20px; /* 添加圓角 */
box-shadow: 0 0 5px #ddd; /* 添加陰影效果 */
outline: none; /* 去掉聚焦時(shí)的邊框 */
}
/* 搜索按鈕樣式 */
.search-box button {
height: 30px; /* 按鈕高度 */
width: 80px; /* 按鈕寬度 */
margin-left: -50px; /* 設(shè)置為負(fù)數(shù)，讓按鈕偏左 */
background: #f60; /* 添加背景色 */
color: #fff; /* 字體顏色為白色 */
border: none; /* 去掉邊框 */
border-radius: 15px; /* 添加圓角 */
box-shadow: 0 0 5px #f60; /* 添加陰影效果 */
cursor: pointer; /* 鼠標(biāo)懸浮時(shí)變?yōu)槭中?*/
}

通過(guò)以上的CSS樣式，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單卻美觀的搜索框了。你可以根據(jù)自己的需求進(jìn)行調(diào)整顏色、大小等屬性。當(dāng)然，此處的CSS代碼只是其中一種實(shí)現(xiàn)方式，如果有更好的方式，歡迎分享。