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

Question

如何在 jQuery Mobile 1.4 中为水平标签添加圆角？尽管 ui-corner-all class 已经存在并且 UL 元素已设置边界半径，但角仍然没有半径。在垂直列表中，半径有效，但此处无效。

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

Answer 1

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

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

Answer 2

CSS

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

DEMO

If you just want the first and last to be rounded

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 3

尝试：

.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;
}

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

How to add corners to horizontal tab bar in jQuery Mobile

css

jquery

jquery-mobile