如何寫圓角搜索框的CSS代碼

在CSS中，我們可以使用border-radius屬性來創(chuàng)建圓角搜索框。border-radius屬性用于設置元素的圓角大小，可以應用于任何具有邊框的元素，如div、input等。

以下是一個簡單的示例，展示了如何為搜索框添加圓角：

HTML代碼：

<div class="search-box">
  <input type="text" class="search-input" placeholder="請輸入搜索關鍵詞">
  <button class="search-button">搜索</button>
</div>

CSS代碼：

.search-box {
  width: 200px; /* 搜索框的寬度 */
  height: 30px; /* 搜索框的高度 */
  border: 1px solid #000; /* 搜索框的邊框樣式 */
  border-radius: 10px; /* 搜索框的圓角大小 */
  position: relative; /* 相對于其***近的定位祖先元素進行定位 */
}
.search-input {
  width: 100%; /* 搜索框中輸入框的寬度 */
  height: 100%; /* 搜索框中輸入框的高度 */
  border: none; /* 去除輸入框的邊框 */
  position: absolute; /* 將元素定位在搜索盒子的中心位置 */
  top: 0; /* 距離頂部的距離 */
  left: 0; /* 距離左邊的距離 */
}
.search-button {
  width: 50px; /* 搜索按鈕的寬度 */
  height: 30px; /* 搜索按鈕的高度 */
  border: none; /* 去除按鈕的邊框 */
  position: absolute; /* 將元素定位在搜索盒子的右側位置 */
  top: 0; /* 距離頂部的距離 */
  right: 0; /* 距離右邊的距離 */
}

在這個示例中，我們?yōu)樗阉骺蛱砑恿艘粋€類名為search-box的div元素，并在其中放置了一個類名為search-input的input元素和一個類名為search-button的button元素，我們使用CSS代碼為這些元素添加樣式，包括設置搜索框的圓角大小、寬度、高度和邊框樣式，以及設置搜索框中輸入框和按鈕的位置。