用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 下无效。

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