html - CSS 中的 "Outward"边框半径？

Question

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

但是，我正在尝试“圆化”按钮的底部边缘，使其看起来像是从页面出来并进入顶部的功能区。

我知道您可以修改它并在每个条目之间添加一个带有圆 Angular 的“分隔符”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 效果更酷