箱形陰影覆蓋

Question

我試圖在兩個元素上顯示一個插入陰影，並覆蓋它們，使它們看起來很像標籤。除了一個角落，我無法弄清楚如何使它看起來平滑，一切看起來都很棒。 （用黃色突出顯示）。

JsFiddle for test
這是我的html：

<div class="container"> 
    <div class="outerWell"> 
    <div class="well" style="padding-top:15px"> 
     text 
    </div> 
    </div> 
    <div class="well" style="margin-top:40px"> 
     test 
    </div> 
</div> 

，然後我有CSS創建陰影和隱藏與overflow:hidden
（。好類是從引導拍攝）陰影的一面

.well { 
    min-height: 20px; 
    padding: 19px; 
    margin-bottom: 20px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    overflow:hidden; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: inset 0 0 5px 1px #888; 
    -webkit-box-shadow: inset 0 0 5px 1px #888; 
    box-shadow: inset 0 0 5px 1px #888; 
    } 
     .outerWell { 
     width: 200px; 
    overflow: hidden; 
    padding-bottom: 10px; 
    height: 35px; 
    margin-top: -40px; 
    position:absolute; 
     } 

是否有ea sy的方式來解決我的問題，或者更好的方式來做我想要實現的目標？

Answer 1

你可以通過創造性地使用僞元素來解決這個問題。看看this post on CSS-Tricks.