Html &引用；“向外”；css中的边界半径？

目前，我的网站顶部的链接如下所示：

然而，我试图“圆”按钮的底部边缘，使它看起来像他们是从页面出来，进入顶部的功能区

我知道你可以破解它，并在每个条目之间添加一个圆角的“分隔符”div，但这很难做到，因为所使用的边框并不都来自同一个div。此外，由于我的按钮彼此非常接近，所以很难看到

“按钮”的css：

“功能区”的css：

---

正如您所看到的，较厚的边框属于延伸网页长度的功能区，而较薄的蓝色边框是按钮的一部分

通过为每个按钮应用

框阴影

可以创建您想要的效果，通过应用3d变换和

透视

属性

可以使3d效果更酷-这是问题的解决方案，我建议查看。我很欣赏链接，但是css/html代码非常复杂，如果不解释发生了什么，很难理解。解决方案可能使用：before和：after伪类。你能把菜单的一半挂起来玩吗？干杯。谢谢你的帮助@doctorrange，这是我认为你应该阅读的JSFIDLE：你能解释一下如何使用方块阴影吗？

.button {
    border-top: 3px solid #A1C1BE;
    border-left: 3px solid #A1C1BE;
    border-right: 3px solid #A1C1BE;
    border-bottom: 0px;
    padding: 5px 8px 5px 8px;
    margin: 0 0 -9px 0;
    border-radius: 5px 5px 0 0;
    font-size: 12px; 
    font-family: 'PT Sans', sans-serif;
    background-color: #f8f8ff;
    color: #484848;
}

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}