paper-tabs标签边框 - 聚合物

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元素添加边框会导致边框位于选择栏上方。

GIF

图片

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

Answer 1

我建议您使用z-index属性。选择栏的z-index大于z-index边框的paper-tab。

<强> 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：Sample

谢谢！