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

发布时间：2018-10-03 08:42:48 所属栏目：创业来源：站长网

导读：如图所示，注意搜索框的下边框和右边框的简单阴影效果。一起到Google看看去！是图片吗？不是，Google是通过3个不同颜色的边框实现的简单阴影。 (注意：Google的效果不支持IE6，但是模仿的效果支持所有浏览器。) Google是如何实现的？ Google的主要HTML代

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

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

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

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

Google是如何实现的？模仿Google新搜索框的阴影效果

Google的主要HTML代码： Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] <div class="ds">
<input class="lst" size="57">
</div> Google的主要CSS代码： Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] .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;
} 查看Demo：点击这里我的模仿效果观察这篇文章的结尾处，或者到博客首页。如图所示，只有下边框有阴影，与我的博客阴影方向一致。
模仿Google新搜索框的阴影效果

我的主要HTML代码：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] <div class="outer">
div_outer
<div class="inner">
div_innner
</div>
</div>

我的主要CSS代码：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] .outer {
width:400px;
border:1px solid #ccc;
border-bottom:2px solid #e7e7e7;
}
.inner {
height:20px;
line-height:20px;
width:360px;
margin-bottom:0px;
border-bottom:1px solid #ccc;
padding:10px 20px 15px 20px;
}

查看Demo：点这里

留念这个效果看起来简单，实践起来也不难。但是要想到，并且做好，并不容易。

首先，需要两个容器，两个边框，不一定每个人都能想到。

然后，那几个边框的颜色和方向是很讲究的，要看起来像阴影，而且是正确的阴影。

最后，简单的东西常常不简单。

（完 2010年6月19日晚）

出处：http://www.haoxiaoru.info/archives/560

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!