这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。
让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。
准备
先准备好你的页面和图片，我们使用这张图片：
我们简单的将HTML写成这样:
XML/HTML代码
- <div id="container">
- <img id="logo" src="logo.png" alt="Lee Munroe" />
- </div>
CSS样式可能会是这个样子的:
CSS代码
- body{background:#999;}
- #container{
- width:960px;
- background:#fff;
- margin:20px auto;
- padding:10px;
- }
下面是一个效果预览：
设置为相对定位
当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：
CSS代码
- #container{
- width:960px;
- background:#fff;
- margin:20px auto;
- padding:10px;
- position:relative;
- }
将它定位到盒子的外面
现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。
现在，我们就可以看到，logo已经显示在盒子之外了。
