先上效果图,再来代码:
上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫。先确定下html结构,在你的广告div盒子里增加一个class为ad-shadow的div区块
<div class="ad-warp"> <div class="ad-shadow"></div> <!-- 这里是广告内容,或图片或js代码 --> </div>
然后加入css代码
.ad-warp { margin: 20px auto; width: 346px; height: 290px; position: relative; border: 5px solid #d2d2d2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ad-shadow { border-color: #e9e9e9 #fff #fff; border-style: solid; border-width: 130px 0 0 130px; height: 0; width: 0; position: absolute; left: -135px; bottom: -5px; }
本文是以一个336*280px的矩形广告为例,你可以根据你的广告尺寸来调整css中的代码。
主要原理还是利用css常见的border属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度border样式。
评论前必须登录!
注册
社交帐号登录