如何在jQuery Mobile中向水平标签栏添加角点

Question

如何在jQuery Mobile 1.4的horizo​​tal标签中添加圆角？ 尽管ui-corner-all类已经存在且UL元素已设置边界半径，但角仍然没有半径。在垂直列表中，半径可以工作，但不在此处。

您可以直接在official page上进行测试。

Answer 1

<强> CSS

.ui-link.ui-btn.ui-tabs-anchor{
    border-radius: 10px;
}

DEMO

  

如果你只想要第一个和最后一个被舍入

li:first-of-type .ui-link.ui-btn.ui-tabs-anchor{
    border-top-left-radius:10px;
    border-bottom-left-radius:10px
}

li:last-of-type .ui-link.ui-btn.ui-tabs-anchor{
    border-top-right-radius:10px;
    border-bottom-right-radius:10px
}

DEMO

Answer 2

尝试：

.ui-navbar li:first-child a {
  border-radius: 10px 0 0 10px;
}
.ui-navbar li:last-child a {
  border-top-right-radius: 0 10px 10px 0;
}

Answer 3

添加这个应该可以解决问题

.tab_item {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}