父母重叠的孩子的盒子阴影

我有2个div的父母和孩子，他们都有固定的宽度，孩子也有固定的高度，子div是浮动的左边，它有盒子阴影：0 1px 2px 0 rgba（0 ，0,0,0.4）问题是父div重叠了孩子的左侧阴影，我无法为孩子添加margin-left，因为它的左侧与parrent div上方的菜单div的左侧对齐，所以它具有确切地说它是在哪里。我试过z-index，减去父母的余量，还有很多其他的东西，我什至不能算，但没有任何东西似乎解决了这个问题。代码：父母重叠的孩子的盒子阴影

<style> 
#menu{ 
    width:100%; 
    height:50px; 
    background:#252525; 
    margin:0 auto 20px auto; 
} 
#wrapper{ 
    background:#CCC; 
    width:1195px; 
    margin:0 auto; 
    clear:both; 
    overflow:auto; 
    background:none; 
    position:relative; 
} 
#wrapper{ 
    overflow:hidden; 
} 
#db_left, #db_right, #db_center{ 
    margin-right:30px; 
    float:left; 
} 
#db_left{ 
    width:170px; 
    position:relative; 
} 
#db_right{ 
    margin-right:0 !important; 
    width:315px; 
} 
#db_center{ 
    width:650px; 
    margin-top:20px !important; 
} 
#profpic_holder{ 
    width:150px; 
    height:150px; 
    padding:10px; 
    position:relative; 
    float:left; 
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4); 
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.4); 
} 
</style> 
<body> 
<div class="wrapper"> 
    <div class="header"> 
     Some Content... 
    </div> 
    <div id="db_left"> 
     <div id="profpic_holder"> 
      <img src="#" width="150" height="150" alt="" /> 
     </div> 
     <div id="profname"> 
     </div> 
    </div> 
    <div id="db_center"> 
    </div> 
    <div id="db_right"> 
    </div> 
</body

它有一个良好的UI设计师一个巨大的问题，骂你知道更好的;）

来源

2013-03-06 user1435897

您可以创建的jsfiddle来说明问题？当我尝试你的代码时，除非我误解了这个问题，否则阴影似乎不会被切断。 – jeradg 2013-03-06 15:01:14

修正了它。

#wrapper是overflow:hidden所以没有看到区域以外的东西，包括孩子的影子。

我所要做的就是让我这样做是为了掩盖仅其顶部和底部的溢出：

#wrapper{ 
    overflow-y:hidden; 
}

来源

2015-03-01 04:07:44 user1435897

的方式您有它

-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4); 
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);

不会有左阴影。如果你想要一个阴影出现在所有方面使用此

-webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4); 
box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);

我希望这可以帮助。

来源

2013-03-06 15:02:31 npage

由于示例中的2px模糊，实际上只有一个非常轻微的1px位影子，可以在左侧和右侧看到。尽管如此，如果他们正在寻找更显着的影子，你的建议会有所帮助。 – jeradg 2013-03-06 15:05:54

它不像保证金我的朋友每个号码都有自己的工作第一个从左到右水平移动阴影，第二个号码垂直移动它，第三个是模糊大小和第四个是阴影的大小叫传播，检查这个链接：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp – user1435897 2013-03-06 16:13:34

父母重叠的孩子的盒子阴影

回答

相关问题