html - 箱形阴影叠加

Question

我正在尝试在两个元素上显示嵌入阴影并将它们覆盖，以便它们看起来与选项卡很好。一切看起来都很棒，除了一个我不知道如何让它看起来光滑的角落。（以黄色突出显示）。

用于测试的 JsFiddle
这是我的 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类取自引导程序）

 .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

您可以通过一些创造性地使用伪元素来实现这一点。看看这篇关于 CSS-Tricks 的帖子。