标签小问题中的 CSS 圆 Angular

Question

我有这个代码 http://jsfiddle.net/Kbzgd/我想要做的是在右上角它也有圆 Angular 效果......

但是如果我删除 border-bottom 并将该边框添加到 border-top 之类的内容中，事件选项卡将在底部获得该边框，我不想要那个 =\

我想要这样，但是右上角有圆 Angular ，可以吗？

谢谢

Answer 1

在 .tab_content_container 上尝试 border-top-right-radius: 5px

在稍微摆弄之后，我添加了这个:

border-top-right-radius: 6px;
border-top: 1px solid #CCC;
position: relative;
top: -1px;
z-index: -10;

所以右边的 Angular 看起来更漂亮一点。另一种方法是使用 box-shadow: 0 -1px 0 0 #CCC(div 上方的阴影)代替 border-top 和 top值(value)观。

编辑:经过更多的编辑后，我去掉了一些突出的部分(如果你仔细看上面的几个例子，你就会看到)。

您所要做的就是删除 ul 上的边框(div 中的边框/阴影效果很好，只要您将其 z-index 设置在 ul 后面)。请注意，当您移动边框时它会移动一点，因此您可以设置 position: relative; top: 1px; 回到 ul.

我给出了多个选项，因为我不知道是否有任何内容会与您的其余代码发生冲突。

这是我最终的 CSS:

ul.tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0); /*this is an alternative which sets the border to be transparent*/
    float: left; 
    height: 29px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%;
}

.tab_content_container {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc; border-top: none;
    clear: both; 
    float: left; 
    width: 100%; 
    border-top-right-radius: 6px;
    /*border-top: 1px solid #CCC;
    /*top: -1px; again some alternatives*/
    position: relative;
    z-index: -10;
    box-shadow: 0 -1px 0 0 #CCC
}