框陰影不會超過包含元素的背景顏色

基本上我有一個側面欄有一個插入框陰影，裏面的側邊欄是一個元素的列表，其背景顏色是橙色......我想能夠使內嵌框陰影與列表項目的背景顏色重疊。框陰影不會超過包含元素的背景顏色

這裏是所期望的效果的圖像：

enter image description here

這裏是我目前得到的效果：

enter image description here

通知我的插圖框陰影是多麼的不越過橙色背景？我將如何能夠解決這個問題？

來源

2013-07-03 Wil Prim

你可以添加[的jsfiddle（http://jsfiddle.net）或類似的展現你的問題的東西嗎？ – Mike

http://jsfiddle.net/8gYRe/ –

box-shadow對父元素不會越過父元素的背景顏色相同的子元素不會覆蓋子元素的背景..您必須將box-shadow也分配給子元素。 this is a jsFiddle of the problem。

爲了解決這個問題，你將不得不使用這樣的事情：

.child{ 
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1); 
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1); 
}

這將創建兩個黑影從一個子元件的每一側，這看起來渾然一體家長的box-shadow。

查看此working jsFiddle

來源

2013-07-03 23:27:32

謝謝！我將額外的盒子陰影應用爲：將鼠標懸停在子元素上，因爲不同的背景顏色（和問題問題）僅出現在該元素的懸停上 – redfox05

框陰影不會超過包含元素的背景顏色

回答

相關問題