仿照 Google 新搜刮框的阴影结果
发布时间：2018-10-04 02:20:44 所属栏目：创业 来源：站长网
导读：如图所示，留意搜刮框的下边框和右边框的简朴阴影结果。一路到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 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
