html - paper-tabs 标签边框 - polymer

Question

我设置了 paper-tabs，但我希望每个标签之间有分隔线。

我目前是这样设置的:

CSS

paper-tabs {
    color: blue;
    background: var(--light-primary-color);
    --paper-tabs-selection-bar-color: var(--accent-color); 
}

paper-tab {
    border-right: 1px solid var(--divider-color);
    --paper-tab-ink: var(--default-primary-color);
}

paper-tab:last-child {
    border: none ;
}

html

<paper-tabs selected="0" scrollable>
    <paper-tab>NUMBER ONE ITEM</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>THE THIRD ITEM</paper-tab>
</paper-tabs>

但是我发现向 paper-tab 元素添加边框会导致边框位于选择栏上方。

动图

图片

有没有人想过如何纠正这个问题，使选择栏位于边框前面？

Answer 1

我建议你使用z-index属性(property)。为大于 paper-tab 边框的 z-index 的选择栏添加 z-index。

CSS:

paper-tabs {
    color: blue;
    background: var(--light-primary-color);
    --paper-tabs-selection-bar-color: var(--accent-color);
    
    --paper-tabs-selection-bar:{
      z-index:1;
    }
  }
  

请联系:Sample

谢谢!