选项卡使用CSS剥离底部边框

Question

我很快就在我的表格上做了一个小标签。

我不会真正更改每个标签上的元素，我只是根据用户点击的标签，使用javascript显示某些字段并隐藏其他字段。

因此，点击用户了解其标签的方式是使用javascript更改所选标签的背景颜色和字体粗细。

它的外观如下：

我的主要问题是我正在使用的design_tabsborder ul。我把它放在那里的唯一原因是因为我想要一个具有垂直渐变淡出的标签颜色为白色的图像。下面这段代码在Chrome上工作得很好，除了角落不圆润之外，它在Firefox上运行良好。

所以我没有遇到需要解决的问题，但我想知道是否存在错误在结构上或其他方面的问题，使用方式我这样做。

以下是我的CSS：

.design_tabs
{
list-style-type:none;
width:95%;
}
.design_tabsborder
{
background-image:url(images/tabsbg.jpg);
background-position:bottom;
background-repeat:repeat-x;
height:15px;
width:100%;
margin-top:10px;
}
.design_tab
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
float:left;
display:block;
padding:5px 3px 5px 3px;
text-align:center;
width:112px;
color:black;
margin-left:2px;
background-color:lightgray;
cursor:pointer;
}

我的HTML：

<ul class='design_tabs' id='design_tabs' style='position:absolute; top:150px; left:20px;'>
<li class='design_tab tabon' id='choose_images'>
Choose images
</li>
<li class='design_tab taboff'  id='company_details'>
Company details
</li>
<li class='design_tab taboff'  id='personal_details'>
Personal details
</li>
<li class='design_tab taboff'  id='final_review'>
Final Review
</li>
<br /><ul class='design_tabsborder'><li>&nbsp;</li></ul>
</ul>

Answer 1

您尚未包含border-radius的非前缀属性。正如你在这里看到的那样（http://caniuse.com/border-radius），几乎没有浏览器再使用带有border-radius的前缀。