css3仿苹果搜索框

最近我学了一种很炫酷的网页设计技巧——CSS3仿苹果搜索框，今天我就来分享一下这个技巧。

首先，我们要用HTML创建一个搜索框的div元素，并给它设置一个id，比如“search-box”：

<div id="search-box">
<input type="text" placeholder="Search">
<button>Go</button>
</div>

接着，我们使用CSS3的特性来美化这个搜索框。

首先，我们要让搜索框看起来像一个圆角矩形。我们可以用border-radius属性来实现：

#search-box {
border-radius: 20px;
}

然后，我们需要给搜索框添加阴影效果。我们可以用box-shadow属性实现：

#search-box {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

接着，我们让搜索框的背景颜色变成白色：

#search-box {
background-color: #fff;
}

最后，我们让搜索框的边框变得更加细致。我们可以使用CSS3的渐变效果和border属性实现：

#search-box {
border: 1px solid #ccc;
border-image: linear-gradient(to right, #e5e5e5, #f5f5f5, #e5e5e5) 1;
}

至此，我们的CSS3仿苹果搜索框就完成了。让我们来看看最后的效果吧：

Go

查看更多关于css3仿苹果搜索框的详细内容...