CSS中的“向外”边界半径？答案

【问题标题】："Outward" border-radius in css?CSS中的“向外”边界半径？
【发布时间】：2011-11-15 04:59:04
【问题描述】：

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

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

我知道您可以破解它并在每个条目之间添加一个带有圆角的“分隔符”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;
}

如您所见，较粗的边框属于延长网页长度的色带，而较细的蓝色边框是按钮的一部分。

【问题讨论】：

Rounded inner corners — 这是问题的解决方案，我建议看看。
我很欣赏这个链接，但是 css/html 代码非常复杂，如果不解释发生了什么就很难理解。
解决方案很可能使用:before和:after伪类。您可以连接菜单的 JSfiddle 来玩吗？干杯。
感谢您的帮助@doctororange，这是 JSFiddle jsfiddle.net/395Ue
我认为您应该阅读以下内容：stackoverflow.com/questions/4839613/…

标签： html button css

【解决方案1】：

您可以通过为每个按钮应用box-shadow 来创建您想要的效果，并且可以通过应用3d 变换和perspective 属性使3d 效果更酷

【讨论】：

你能解释一下如何使用 box-shadow 吗？