模仿 Google 新搜索框的阴影效果
来源:程序员人生 发布时间:2014-02-27 21:02:40 阅读次数:4662次
如图所示,注意搜索框的
下边框和
右边框的简单阴影效果。一起到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;
}