Google wave 的层阴影建造要领(css+图片)
发布时间：2018-08-28 14:41:58 所属栏目：创业 来源：站长网
导读：前几天收到了一个google wave的约请,说真话我对这个对象没啥乐趣,没时刻去研究他到底是干什么的,可是作为一个前端,照旧应该体谅一下这些对象的,于是看了一下这玩意,看到第一眼嚼的好履历,我当即好奇起来,这种阴影好神奇啊,是咋做出来的呢,我去网上搜了一通,
前几天收到了一个google wave的约请,说真话我对这个对象没啥乐趣,没时刻去研究他到底是干什么的,可是作为一个前端,照旧应该体谅一下这些对象的,于是看了一下这玩意,看到第一眼嚼的好履历,我当即好奇起来,这种阴影好神奇啊,是咋做出来的呢,我去网上搜了一通,没有发明建造阴影的文章(除了那种粗拙的阴影),于是我用ff把它涉及到的图片都扒了下来,第一时刻本身用这些图片组建了这种样式,也许我的要领和google有所进出,可是结果简直是出来了:如下图:  要看源代码和真正的结果,请点击这里:(请用firfox可能chrome打开此链接,不支持ie) http://www.coderbbs.cn/UED/google-wave-test.html 有一点必要留意,这种样式在ie中不支持,我想这也是为什么google wave在ie里必要给ie装一个chrome frame的缘故起因,在ie里表现的提示页也有这种阴影样式,可是那是一个牢靠层,只有一个配景图片,无法实现层巨细的改变,详细是由于ie中假如不配置层的宽度,只配置left和right,层并不会本身延长,造成无法实现这种结果.详细可以本身尝试 下面开始说道理: wave里应用了如下的图片来实现阴影和圆角(个中省略了几个用来修饰bug的小图片,不影响结果)  个中各用在:1-问题配景;2-问题右边;3-内容体由边框;4-问题左边;5-右下角圆角;6-内容体下边框;7-左下角圆角;8-内容体左边框 起首我们必要结构一个html布局,外边是一个总的容器,内里包罗修饰层,问题层,内容层: html代码,只写了一个 Copy to Clipboard  引用的内容：[www.veryhuo.com]
1 <div class="container con-1"> 2 <div class="w-top-left corner"></div> 3 <div class="w-top-right corner"></div> 4 <div class="w-bot-left corner"></div> 5 <div class="w-bot-right corner"></div> 6 <div class="w-b-left corner"></div> 7 <div class="w-b-right corner"></div> 8 <div class="w-b corner"></div> 9 <div class="w-hd">问题</div> 10 <div class="w-bd">内容</div> 26 </div> 接着是我们要漫衍各个图片的位置: （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
