如图所示,注意
搜索框的
下边框和
右边框的简单阴影
效果。一起到Google看看去!
是图片吗? 不是,Google是通过3个不同颜色的边框实现的简单阴影。
(注意:Google的效果不支持IE6,但是模仿的效果支持所有浏览器。)
Google是如何实现的?
Google的主要
HTML代码:
<div class=ds>
<input class=lst size=57>
</div>
Google的主要CSS
代码:
.ds {
height:32px;
border-b
ottom: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-b
ottom-color:#999;
border-right-color:#999;
}