今天图老师小编给大家精心推荐个CSS实例:Google Adsense代码广告投影效果教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~
【 tulaoshi.com - Web开发 】
一直觉得帕兰的 Google Adsense 广告修饰得很漂亮。使用背景图片可以很方便地实现这个投影效果，不过使用 CSS 就足以实现。
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）以创建一个 300×250 尺寸的广告投影为例：
div class="google"div class="shadow"!-- 300x250 --/divdiv class="adsense"!-- Google Adsense --/div/div
这三个 div 容器中，其中第一个子容器用于投影效果，第二个用于 Google Adsense 代码。附加样式如下：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
.google{position:relative;width:440px;height:260px;}.adsense{width:300px;height:250px;border:5px solid #d2d2d2;margin-left:130px;position:absolute;z-index:1;}.adsense:hover{border-color:#565656;}.shadow{border-color:#e9e9e9 #fff #fff;border-style:solid;border-width:130px 0 0 130px;height:0;width:0;position:absolute;left:0;top:130px;}主要利用了定位和边框，利用边框，可以轻松实现三角形。有两个遗憾是：投影的渐变无法实现，广告 hover 效果在 IE6 下无效。不过没有用到任何图片，目前已经在芒果上应用。少一些体积省一些流量，可以尝试一下。
来源:https://www.tulaoshi.com/n/20160220/1631787.html
看过《CSS实例:Google Adsense代码广告投影效果》的人还看了以下文章 更多>>
