如何使边框在边框底部上方？

Question

我有一个Bootstrap列表组，看起来像：

这是我的CSS：

$border: 1px solid rgba(0, 0, 0, 0.125);

.customer-orders-filters {
  .list-group {
    box-shadow: $card-box-shadow;
    color: $text-color;
    font-weight: bold;

    .list-group-item {
      border-left: none;
      border-right: none;
      border-bottom: $border;

      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: none;
      }
      &.active {
        border-left: 5px solid $blue;
      }
    }
  }
}

如您所见，border-left底部不太正确。 我试图删除第一个孩子上的border-bottom，然后在border-top上添加nth-child(2)，但这不起作用，border-top不存在。我还尝试将border-style: outset的{​​{1}}设置为border-bottom，但无效。

我希望first-child完全在border-left之上或之下，但不要一半...

您知道我该如何解决吗？我应该使用伪元素吗？

Answer 1

考虑使用如下背景和边框：

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}

<div class="box"></div>

或相反：

.box {
  width:200px;
  height:50px;
  padding-bottom:2px;
  border-left:5px solid blue;
  background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}

<div class="box"></div>

---

您还可以使用阴影框

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  box-shadow:5px 0 0 blue inset;
}

<div class="box"></div>

Answer 2

问题似乎是由Bootstrap添加“ margin-bottom：-1px;”引起的到.list-group-item类。覆盖该规则（并将边界线移至底部）似乎可以解决此问题。 （至少在Chrome中，我没有测试其他浏览器。）

例如：

.list-group-item {
  border-left: none;
  border-right: none;
  border-top: $border !important;
  border-bottom: 0;
  margin-bottom: 0;
  ... etc ...

笔：https://codepen.io/anon/pen/moyOGg

请注意，进行此更改可能还会带来其他后果（Bootstrap开发人员必须在其中放入-1px保证金规则），因此您需要进行更多测试！