css - Sencha Touch Tabbar 中的双色边框

Question

我有问题:

我有一个包含三个元素的 Tabbar(停靠在底部)，我想在这些元素之间有一个“分隔符”。我尝试使用 border-right CSS 属性来模拟分隔符。

第一个问题是:有没有一种方法可以将特定的类(添加到 sencha 类层次结构中)添加到栏的最后一项并为此元素关闭 border-right 属性？

此外，我想要由两条线组成的边框，一条是深灰色，另一条比第一条浅一点。第二个:我如何使用 CSS 进行设置？我知道如何使用完整的边框来做到这一点，但在那种情况下我不知道。

非常感谢任何帮助!

Answer 1

首先，您可以使用 :last-child 选择器将最后一个选项卡的 border-right 设置为 none。其次，您可以使用 box-shadow 添加第二条垂直线(第一条是 border-right):

HTML:

<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>    

CSS:

ul {
  list-style:none;
  padding:0;
}
ul > li {
  width:33%;
  height:100px;
  float:left;    
  border-right: 1px solid darkgray;
  box-shadow:  1px 0 0 white, 2px 0 0 lightgray;
  text-align:center;
}
ul > li:last-child {
  border-right:none;  
  box-shadow:none;
}

Demo.