如何阻止父div的陰影溢出？

Question

子div的影子可以從父div邊界中看出。有沒有辦法阻止這個影子？與孩子div一樣。

這只是我的頁面的一個簡單的模板，在頁面運行的時候，我將無法控制div的位置和數量，所以我需要一個廣義的css /方法，其中兒童的陰影div不重疊，當他們在角落時他們不會溢出父母。

<div style="width:600px; height:700px; margin-left:auto; margin-right:auto; background: #eaeaea;"> 
    <div style="height:50px;width:50px; background:#ff0000; box-shadow: #000 0px 0px 3px;"></div> 
    <div style="height:50px;width:50px; background:#ff0000; box-shadow: #000 0px 0px 3px;"></div> 
</div> 

Answer 1

添加overflow:hidden到父div。

Demo here

Answer 2

添加overflow:hidden父div。

JSFiddle Link