CSS盒陰影的div容器切斷

編輯：更一般的問題：我喜歡div-box的陰影，但是當我將div放在box-shadow'd div的正下方時，影子的底部部分儘管與z索引混淆，但不會覆蓋頂部。所以它看起來像箱子陰影不能覆蓋另一個div？任何想法都會很棒！CSS盒陰影的div容器切斷

原question- 我用的藍圖佈局。這意味着有一個950px的容器，其中包含#content。

在這種情況下，#content充滿整個容器，這樣也950px。

我想在#content上有一個陰影，但問題是陰影會被切斷，因爲在.container中沒有空間可以看到陰影。

解決方法是減少#content的寬度，但這會弄亂我已有的佈局定位，並且看起來太窄。

有沒有辦法讓箱子陰影忽略父容器並出現在它上面？我猜這不是特定的藍圖，但這是上下文。謝謝！

編輯：

body .container { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 950px; 
} 
body .container:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#content { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    box-shadow: 0 0 4px black; 
    -moz-box-shadow: 0 0 4px black; 
}

#content是直接在.container。如果我在#content上投下陰影，直到縮小寬度（與內部元素混淆）時才能看到它。

來源

2011-09-14 butterywombat

你可以包括一個jsFiddle，以便我們可以看到有什麼限制或限制。我有一些想法，但取決於你必須使用什麼，他們可能會或可能不會工作。 – FreeSnow

你如何生成陰影？（我認爲默認情況下CSS容器陰影不會被父容器修剪？）我們可以看到一些代碼嗎？ –

我會爲.container元素添加一些填充，並確保您的#content保持您所需的寬度。

來源

2011-09-14 12:30:35

嗯是的我認爲這可能是唯一的解決方案...將其標記爲答案，如果沒有其他人評論更新的代碼... – butterywombat

你可以使.container更寬（960爲固定寬度完全可以接受的），並保持內部.container居中＃內容。這會爲你搞亂什麼嗎？

來源

2011-09-14 12:29:00

嗯我可以嘗試一下，除了我使用指南針gem使藍圖與html更少內聯。所以它混入它使得容器950默認 – butterywombat

你不需要在.container的overflow: hidden，因爲你已經在使用它清晰的定位。所以，你可以把它扔掉：http://jsfiddle.net/kizu/gDXLf/

來源

2011-09-15 21:40:17 kizu

感謝您的提示 – butterywombat

這一切都取決於你想要達到的目的。

我在使用內嵌塊組列表項時遇到了困難。正確的陰影是由列表項在懸停切斷旁邊

一個簡單的黑客是剛剛添加以下元素：

li:hover { 
    transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
}

WORKING EXAMPLE

雖然，這可能只適用於特定場景。我只在上面的示例中對它進行了測試。

來源

2014-07-14 02:56:49 Fizzix

CSS盒陰影的div容器切斷

回答

相關問題