引子
在修復問題的時候，發現一個元素設置了 box-shadow 屬性，其它的元素也有公用，但這個元素的陰影看不見，試着把顏色值變的更明顯，但還是看不到。問題示例，示例二維碼。
問題原因
首先想到是不是屬性寫錯了，但其它的元素都正常顯示，這個是公用的樣式。那么是不是有樣式覆蓋呢？在瀏覽器中仔細看了下，樣式是有覆蓋，但沒有覆蓋 box-shadow 屬性。於是就仔細的跟正常顯示的元素進行對比，發現有一點不同：一個元素的父元素可以滾動，另外一個元素的父元素不可以滾動。於是嘗試把設置 overflow-y 屬性去掉，然后就好了！
雖然解決了問題，但想要明白其中的一些緣由，於是查找相關資料，發現了一些說明，感覺有用，下面是部分內容的翻譯。
外陰影投射陰影時，元素的邊框盒子好像是不透明的，假定擴散的距離是 0，它的邊界有着跟邊框盒子一樣的大小和形狀。陰影從邊框外邊界繪制，陰影在元素盒子邊框內側被剪切。
內陰影投射陰影時，內邊距邊界之外的一切好像都是透明的，假定擴散的距離是 0，它的邊界有着跟內邊距盒子一樣的大小和形狀。陰影從內邊距邊界內側繪制，陰影在元素內邊距盒子之外被剪切。
陰影效果從前到后應用：第一個陰影在最頂層，其它的在這個陰影的下層。陰影不會影響布局，可能會與其它盒子重疊或者跟他們自己的陰影重疊。從內容堆疊和繪制順序來說，一個元素外陰影，會立即在元素背景之下繪制，內陰影會立即在元素的背景之上繪制，如果有邊框的話，內陰影也會在邊框和邊框背景圖片之下。
根據以上的內容，結合遇到的問題，就得出了一個想法：既然陰影的繪制不會影響布局，那么是不是說陰影並不會占據實際的空間。測試示例，示例二維碼。
由此可見，陰影是不占據正常文檔流里面的空間。
再回到問題上來，父元素設置了 overflow 屬性，其值除了 visible 之外，當內容超過了內邊距時都會被剪切掉。其子元素的高度、寬度和父元素一樣，子元素設置 box-shadow 時，繪制的陰影從子元素的邊框邊界向外繪制，子元素邊界跟父元素的邊框邊界相同，繪制出的陰影超出了父元素的內邊距邊界，被屬性 overflow 的作用剪切掉了，就出現了看不見陰影的現象。