這是一個正在逐漸流行的創意的趨勢。事實上它非常容易實現，只需要增加了一個額外的元素和獨特的設計。

讓我們看一下該如何實現立體盒子的效果吧，然后，我們將會給大家展示一些很好的例子。

準備

先準備好你的頁面和圖片，我們使用這張圖片：

我們簡單的將HTML寫成這樣:

<div id="container">
<img id="logo" src="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已經顯示在盒子之外了。