CSS作為前端樣式表的一種語言，在網站的設計中起到了很重要的作用。在網站設計中，搜索框也是一個不可或缺的元素。在這里，我們將會介紹如何使用CSS來制作一個漂亮的搜索框。

.search {
display: flex;
align-items: center;
position: relative;
width: 300px;
}
.search input[type="text"] {
border: none;
width: 100%;
padding: 8px 16px;
font-size: 16px;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.search span {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 0 16px;
background-color: #167df7;
color: #fff;
font-size: 16px;
cursor: pointer;
}

首先，我們創建一個包含輸入框和搜索按鈕的容器。我們使用flex布局來使這個容器水平居中，并使用相對定位讓搜索按鈕在輸入框的右側。

接下來，我們設置輸入框的樣式。我們去掉邊框，設置寬度100%，添加內部填充，設置字體大小和圓角，并添加一個陰影效果。

最后，我們設置搜索按鈕的樣式。我們將它設置為絕對定位，讓它處于容器右側的中央位置。我們選擇了一個醒目的背景顏色，并添加了一個簡潔的、易于理解的標志。

這是我們創建的基本搜索框。你可以在此基礎上添加其他功能，比如自動完成、歷史記錄、搜索過濾等等，以滿足你的需求。CSS可以讓我們為搜索框添加各種各樣的樣式，使得搜索框成為一個美觀而實用的工具。