CSS圆角

Question

我有这样的代码http://jsfiddle.net/Kbzgd/我想要做的是在右上角有它的圆润效果藏汉...

但如果我删除底部边框和将边框添加到像边框一样的内容中，活动选项卡在底部获得边框，并且我不想要那个= \

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

感谢

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; 

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

编辑：一些更多的编辑后，我摆脱了点点伸出（如果你用上面的几个例子仔细观察你会看到）。

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