CSS打造優(yōu)雅圓角搜索框設(shè)計(jì)

在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，一個(gè)具有圓角的搜索框不僅能提升用戶體驗(yàn)，還能為頁(yè)面增添一抹亮色，本文將介紹如何使用CSS來創(chuàng)建一個(gè)具有吸引力的圓角搜索框。

一、HTML結(jié)構(gòu)搭建

我們需要一個(gè)基本的HTML結(jié)構(gòu)來承載搜索框，一個(gè)搜索框包含輸入框和提交按鈕。

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <button class="search-button">搜索</button>
</div>

二、CSS樣式設(shè)定

通過CSS來設(shè)定圓角樣式，我們可以使用border-radius屬性來創(chuàng)建圓角效果，為了使搜索框整體看起來更加和諧，還可以調(diào)整其他樣式屬性，如邊框、背景色等。

/* 容器樣式 */
.search-container {
  position: relative; /* 確保子元素定位相對(duì)于此容器 */
  width: 200px; /* 根據(jù)需要設(shè)定寬度 */
}
/* 輸入框樣式 */
.search-input {
  width: 100%; /* 填滿容器寬度 */
  padding: 10px; /* 內(nèi)邊距 */
  border: none; /* 移除邊框 */
  border-radius: 10px; /* 創(chuàng)建圓角 */
  background-color: #f0f0f0; /* 背景色 */
  transition: all 0.3s ease; /* 平滑過渡效果 */ /* 可選 */
}
/* 按鈕樣式 */
.search-button {
  position: absolute; /* ***定位，緊挨輸入框右側(cè) */
  right: 0; /* 與容器右邊界對(duì)齊 */
  padding: 8px 12px; /* 內(nèi)邊距 */
  border: none; /* 無邊框 */
  border-radius: 5px; /* 按鈕圓角 */ /* 可適當(dāng)調(diào)整與輸入框的圓角匹配 */
  background-color: #4CAF50; /* 按鈕背景色 */ /* 可選顏色 */
  color: white; /* 文字顏色 */ /* 可選顏色 */
  cursor: pointer; /* 鼠標(biāo)懸停顯示手形光標(biāo) */ /* 可選效果 */
}

這樣，一個(gè)簡(jiǎn)單的圓角搜索框就制作完成了，你可以根據(jù)需要調(diào)整圓角的大小、邊框顏色等細(xì)節(jié)，以達(dá)到***佳視覺效果，通過這種方式，你可以輕松地為網(wǎng)站添加個(gè)性化的搜索功能。