CSS3搜索框的寫(xiě)法

在CSS3中，可以使用各種樣式來(lái)定制搜索框的外觀(guān)，以下是一些常見(jiàn)的CSS3搜索框?qū)懛ǎ?/p>

1、基本的搜索框樣式：

#search-box {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

這個(gè)樣式定義了一個(gè)基本的搜索框，包含寬度、高度、內(nèi)邊距、邊框和邊框圓角。

2、搜索框的變體：

#search-box-variant {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

這個(gè)樣式在基本樣式的基礎(chǔ)上添加了陰影效果。

3、搜索框的動(dòng)畫(huà)效果：

#search-box-animated {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: box-shadow 0.3s ease-in-out;
}

這個(gè)樣式在基本樣式的基礎(chǔ)上添加了動(dòng)畫(huà)效果，使得搜索框在獲取焦點(diǎn)時(shí)顯示陰影。

這些樣式只是CSS3搜索框?qū)懛ǖ谋揭唤?，你可以根?jù)自己的需求進(jìn)行定制，希望這些示例能幫助你開(kāi)始使用CSS3來(lái)定制自己的搜索框。