Question

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

但是，如果我删除边框底部并将该边框添加到内容（如border-top），则活动标签会在底部获取该边框，我不希望这样= \

我想要这样但是右上角有圆角可能吗？

由于

Answer 1

在border-top-right-radius: 5px

上试试.tab_content_container

稍微摆弄一下后，我补充说：

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

所以右角看起来更好一点。另一种方法是使用box-shadow: 0 -1px 0 0 #CCC（div上方的阴影）而不是border-top和top值。

编辑：经过一些编辑之后我摆脱了一点点（你会看到你仔细看看上面几个例子）。

你所要做的就是删除ul上的边框（div的边框/阴影工作正常，只要你在ul后面设置它的z-index）。请注意，当您移动边框时，它会移动一点，因此您可以将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
}

Answer 2

此处：http://jsfiddle.net/2CVNj/ 在选项卡周围添加了一个新的div，使用overflow: auto solution清除浮动，然后在内容顶部移动边框并摆弄一些z索引。很好地工作。

CSS中的圆角很少出现问题

2 个答案: