CSS中的"Outward" border-radius是什么？

Question

CSS中的"Outward" border-radius是什么？

htmlbuttoncss

4

目前，我的网站顶部链接的样式如下：

enter image description here

然而，我想要将按钮的底部边缘“圆角化”，使其看起来像是从页面中弹出并进入到顶部的带子中。

我知道你可以通过“欺骗”的方式，在每个条目之间添加一个具有圆角的“分隔符”div，但这样做会很困难，因为使用的边框不全来自同一div。此外，由于我的按钮非常靠近彼此，这也不容易实现。

“button”样式的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;
}

"Ribbon"的CSS：

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

你可以看到，较粗的边框属于伸展整个网页长度的带状物，而较细的蓝色边框则是按钮的一部分。

- user623990

圆角内部边缘 - 这是我推荐查看的问题解决方案。 - Nick Sadovnikov

1

我很感谢提供的链接，但是CSS/HTML代码非常复杂，如果没有解释清楚其中的含义，很难理解。 - user623990

2

解决方案可能会使用:before和:after伪类。你能提供一个JSfiddle链接让我们测试一下菜单吗？谢谢。 - doctororange

感谢@doctororange的帮助，这是JSFiddle链接http://jsfiddle.net/395Ue/。 - user623990

1

我认为你应该阅读这篇文章：https://dev59.com/bG445IYBdhLWcg3wdqSO - JohnB

谢谢你的评论，@JohnB，但我想把角落弄圆反过来。 - user623990

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eldos · Accepted Answer

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