css中的“向外”边界半径？

Question

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

但是，我试图“围绕”按钮的底部边缘，使它看起来像是从页面出来并进入顶部的功能区。

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

“按钮”的CSS：

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

css为“功能区”：

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

如您所见，较粗的边框属于拉伸网页长度的功能区，而较薄的蓝色边框属于按钮的一部分。

Answer 1

通过对每个按钮应用box-shadow可以创建所需的效果，通过应用3d变换和perspective属性可以使3d效果更加炫酷