盒子阴影覆盖

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;
        }   

是否有一种简单的方法可以解决我的问题，或者可能是一种更好的方法来实现我想要实现的目标？

Answer 1

你可以通过一些创造性地使用伪元素来解决这个问题。看看this post on CSS-Tricks.