一段CSS代码让div盒子有立体效果

先上效果图，再来代码：

上图是对一个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样式。