CSS样式如何实现Logo立体盒子效果

核心提示： 让我们看一下该如何实现立体盒子的效果吧，然后，CSS样式如何实现Logo立体盒子效果，我们将会给大家展示一些很好的例子， 准备先准备好你的页面和图片， #logo{position:absolute;left:-15px;} 现在，我们就可以看到，我们使用这张图片： 我们简单的将HTML写成这样:<div

　 让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。

　  准备先准备好你的页面和图片，我们使用这张图片：

　  我们简单的将HTML写成这样:

<div id="container">  <img id="logo" src="http://www.cncms.com/logo.png" alt="Lee Munroe"  /> </div>

　  CSS样式可能会是这个样子的:

body{background:#999;}   #container{  width:960px;  background:#fff;  margin:20px auto;  padding:10px; }

　  下面是一个效果预览：

　  设置为相对定位，当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：

#container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; }

　  将它定位到盒子的外面现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。
 

#logo{ position:absolute; left:-15px; }

　  现在，我们就可以看到，logo已经显示在盒子之外了。