用CSS实现百度/Google广告投影效果

在许多网站中我们可以看到网站主将Google adsense或是百度推广修饰成投影效果，很漂亮，给人的视觉效果非常不错。不过大多数都是基于背景图片的方式来实现的，但实际上通过CSS
同样能实现这种效果。如下：

以Google adsense 336*280为例：

1.html代码如下：

<div class="google">

<div class="shadow"><!-- 336x280 --></div>

<div class="adsense"><!-- Google Adsense --></div>

</div>

其中第一个子容器用于投影效果，第二个用于 Google Adsense 代码。

2.css
代码如下：

.google{position:relative;width:475px;height:280px;}

.adsense{width:336px;height:280px;border:5px solid #d2d2d2;margin-left:135px;position:absolute;z-index:1;}

.adsense:hover{border-color:#565656;}

.shadow{border-color:#e9e9e9
#fff #fff;border-style:solid;border-width:130px 0 0
135px;height:0;width:0;position:absolute;left:0;top:160px;}

主要利用了定位和边框，利用边框，可以轻松实现三角形。

综合而言，有两个小缺点：

1.投影的渐变效果无法实现。

2.广告 hover 效果在 IE6 下无效。

但也有其优点：没有用到图片，这样显示速度加快。