CSS樣式如何實現Logo立體盒子效果

作者：Eve Cole 更新時間：2009-06-12 19:47:12

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

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

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

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已經顯示在盒子之外了。