搜索的方框一般是我們在網頁上常見的元素。如果您的網站需要一個搜索功能，那么創建一個搜索方框就很有必要。下面我們將介紹如何使用 CSS 創造一個簡單的搜索方框。 首先，在 HTML 中，我們需要一個 DIV 來定義搜索方框的外框。代碼如下： `````` 這里使用了 HTML5 中添加的 `placeholder` 屬性，并且添加了一個 `button` 標簽來實現搜索功能。 接下來，我們需要使用 CSS 添加樣式。代碼如下： ``` .search-box { display: inline-block; width: 300px; height: 40px; border: 1px solid #ccc; border-radius: 20px; padding: 10px; box-sizing: border-box; } .search-box input[type="text"] { width: 70%; height: 100%; border: none; outline: none; font-size: 16px; } .search-box button[type="submit"] { width: 30%; height: 100%; border: none; border-radius: 20px; background-color: #ccc; color: #fff; font-size: 16px; cursor: pointer; } ``` 這里，我們首先給搜索方框設置了一個長為 300px，高為 40px 的邊框；然后使用 `border-radius` 屬性設置圓角效果，使用 `padding` 屬性讓輸入框與邊框之間留有一定的間距；最后使用 `box-sizing` 屬性將 `padding` 算入輸入框的寬度之內。 之后，我們為輸入框和按鈕設置了樣式。我們使輸入框的寬度為 70%，使用 `border` 和 `outline` 屬性來去掉輸入框的邊框，并加入一些其他的屬性，如字體大小等。而對于按鈕，我們設置了寬度為 30%，圓角樣式，背景顏色和字體顏色。最后，將鼠標的樣式設置為手形，以增加用戶的互動體驗。 最終的搜索方框效果如下： ``` +---------------------+ | Search... [Go] | +---------------------+ ``` 通過這樣的 CSS 樣式，我們可以創建出一個簡單的搜索方框。當然，如果需要更多的樣式，還可以根據需求進行更改。