模仿 Google 新搜索框的阴影效果

如图所示，注意搜索框的下边框和右边框的简单阴影效果。一起到Google看看去！

 

是图片吗？ 不是，Google是通过3个不同颜色的边框实现的简单阴影。

(注意：Google的效果不支持IE6，但是模仿的效果支持所有浏览器。)

Google是如何实现的？

Google的主要HTML代码：

<div class=ds>
<input class=lst size=57>
</div>

Google的主要CSS代码：

.ds {
height:32px;
border-bottom:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
display:inline-block;
}
.lst {
height:25px;
margin:0px;
padding:5px 8px 0 6px;
border:1px solid #ccc;
border-bottom-color:#999;
border-right-color:#999;
}