0

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

但是，如果我删除边框底部并将该边框添加到边框顶部等内容中，则活动选项卡会在底部获得该边框，我不想要那个 =\

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

谢谢

4

2 回答 2

2

试穿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-topandtop值。

编辑：经过更多的编辑，我摆脱了一点点突出（你会看到如果你仔细看上面的几个例子）。

您所要做的就是删除 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
}
于 2012-05-20T23:40:35.877 回答
1

这里： http: //jsfiddle.net/2CVNj/ 在标签周围添加了一个新的 div 以使用overflow: auto解决方案来清除浮动，然后将边框移到内容顶部并摆弄一些 z-index。效果很好。

于 2012-05-20T23:53:29.837 回答