css不同样式的搜索框

搜索框在网站设计中是非常常见的元素，针对不同的设计风格和网站主题，我们可以使用不同的CSS样式来打造搜索框，为网站增添更多的美观和互动性。

/*基础搜索框样式*/
.search-box {
   width: 300px;
   height: 40px;
   border: 2px solid #ccc;
   border-radius: 20px;
   padding: 5px 10px;
   font-size: 16px;
   transition: all .3s ease;
}
.search-box:focus {
   outline: none;
   border: 2px solid #008CBA;
}

/*圆角按钮搜索框*/
.round-search-box {
   width: 300px;
   height: 40px;
   border-radius: 30px;
   background-color: #f2f2f2;
   outline: none;
   padding-left: 20px;
   font-size: 16px;
   border: none;
   transition: all .3s ease;
}
.round-search-box:focus {
   background-color: #fff;
   box-shadow: 0 0 5px #008CBA;
}

/*卡片式搜索框*/
.card-search-box {
   width: 300px;
   height: 40px;
   border-radius: 20px;
   background-color: #fff;
   border: solid 2px #ccc;
   position: relative;
   box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.card-search-box:before {
   content: '\f002';
   font-family: FontAwesome;
   font-size: 20px;
   color: #999;
   padding: 0 10px;
   position: absolute;
   left: 0;
   top: 5px;
}
.card-search-box input[type="text"] {
   width: 100%;
   height: 100%;
   padding: 5px 10px 5px 45px;
   font-size: 16px;
   border: none;
   outline: none;
} 

以上是3种不同样式的搜索框，基础样式可直接使用，圆角按钮样式增加了动画效果，提供更好的用户体验；卡片样式运用了FontAwesome字体图标，增加美观性和时尚感，同时也可以根据实际需求自由调整样式效果。