Html 纸张选项卡选项卡边框-聚合物

我已设置了

纸张选项卡

，但我希望每个选项卡之间都有分隔符

我目前的设置如下：

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>

第一项
项目二
第三项

但是，我发现在

纸张选项卡

元素中添加边框会导致边框位于选择栏上方

gif

图像

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

我建议您使用属性。为大于

纸张选项卡的
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;
    }
  }
  

Plnkr：

谢谢
 好极了！我想可能是这样的，但不确定如何准确地得到它。这已经困扰我好几个星期了！#]