html - 使用 CSS 标签去除底部边框

Question

我很快就在我的表单中添加了一个带标签的小顶部。

我不会实际更改每个选项卡上的元素，我只是使用 javascript 根据用户点击的选项卡显示某些字段并隐藏其他字段。

因此，用户知道他们的选项卡被点击的方式是使用 javascript 更改所选选项卡的背景颜色和字体粗细。

它是这样的:

我的主要问题是关于我正在使用的 design_tabsborder ul。我把它放在那里的唯一原因是因为我想要一个图像，该图像具有从选项卡颜色到白色的垂直渐变淡出。下面的代码在 Chrome 上运行良好，除了 Angular 落不是圆 Angular 之外，它在 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 前缀。