标签中的CSS圆角小问题答案

【问题标题】：CSS Rounded corners in Tabs little issue标签中的CSS圆角小问题
【发布时间】：2012-05-20 23:31:12
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： css rounded-corners

【解决方案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 上的边框（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
}

【讨论】：

感谢 Raeki，我刚刚使用您的代码将 ul.tabs 的宽度编辑为 width: 99%;现在看起来很完美！
哈哈，这也困扰着我——我添加了一个替代修复，你也可以看看。编码愉快！
嗯 jsfiddle.net 中的看起来不错，但在我的网站中它隐藏了内容，z-index 隐藏了它......
链接无法正常工作，但您可以将 z-index 设置为更高（如 -1），或将 ul 的 z-index 设置为更高（看起来像更好的选择）
我已经重做了这个，这样效果更好jsfiddle.net/Kbzgd/19，但我有一个小错误。如果你看左边的标签，有一个小的空白（一个白色像素）它没什么大不了的，但有些人可能会注意到大声笑，有没有办法解决它？大声笑

【解决方案2】：

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

【讨论】：