模仿 Google 新搜索框的阴影效果
发布时间：2018-10-02 02:06:08 所属栏目：创业 来源：站长网
导读：如图所示，注意搜索框的下边框和右边框的简单阴影效果。一起到Google看看去！ 是图片吗？ 不是，Google是通过3个不同颜色的边框实现的简单阴影。 (注意：Google的效果不支持IE6，但是模仿的效果支持所有浏览器。) Google是如何实现的？ Google的主要HTML代
|
如图所示，注意搜索框的下边框和右边框的简单阴影效果。一起到Google看看去！
是图片吗？ 不是，Google是通过3个不同颜色的边框实现的简单阴影。 (注意：Google的效果不支持IE6，但是模仿的效果支持所有浏览器。) Google是如何实现的？ Google的主要HTML代码： Copy to Clipboard  引用的内容：[www.veryhuo.com]
<div class="ds"> <input class="lst" size="57"> </div> Google的主要CSS代码： Copy to Clipboard 引用的内容：[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：点击这里 我的模仿效果 观察这篇文章的结尾处，或者到博客首页。 如图所示，只有下边框有阴影，与我的博客阴影方向一致。 
我的主要HTML代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<div class="outer"> div_outer <div class="inner"> div_innner </div> </div> 我的主要CSS代码： Copy to Clipboard引用的内容：[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 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
