Css 盒子尺寸是否有LI等效物：边框盒？

我有一个导航栏，由一个UL和几个LI项目组成。活动导航按钮有不同的背景色，但我还需要在按钮上有一个小的底部边框

应用边框时，它会显示在LI之外。使用div时，可以使用

框大小：边框框

获取div内的边框。但是如何偏移LI项上的边框？？？（

列表样式位置

似乎没有效果）

我的scss代码：

nav {
  ul {
    li {
      float: left;
      padding: 0;

      box-sizing: border-box;
      list-style-position: inside;

      &.active {
        background-color: white;
        border-bottom: solid 6px blue;
        box-sizing: border-box;
        list-style-position: inside;
      }
    }
  }
}

使用div时，可以使用“框大小：边框框”来获取 分区内的边界

为了澄清，

box size:border box

不会使边框位于元素内（更改偏移量），它会使边框大小在设置时包含在宽度或高度中，因此，如果给

li

一个25px的高度和5px的底部边框，则内部高度将降低到20px

但是如何偏移LI项目上的边框

您不能偏移边框，在元素上显示/隐藏边框的一个解决方法是使用伪元素，这将避免在切换边框时使元素跳转/调整大小，但还有更多方法，例如

线性渐变

（悬停时显示在下面的示例中）

正文{
背景：浅灰色；
}
李国荣{
位置：相对位置；
浮动：左；
填充：0 5px；
列表样式类型：无；
}
导航ulli.active：：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：-6px；
背景色：白色；
边框底部：实心6px蓝色；
z指数：-1；
}
/*或者可以使用线性梯度*/
nav ul li:悬停{
背景：线性梯度(
底部为白色钙（100%-5px），蓝色5px
)左下无重复；
}

一些文本


一些文本


一些文本


一些文本

另一种快速而干净的创建内边框的方法是创建一个不带模糊的插入阴影。您甚至不需要框大小或列表样式

nav {
  ul {
    li {
      float: left;
      padding: 0;

      &.active {
        background-color: white;
        box-shadow: 0px -6px 0px red inset;
      }
    }
  }
}

---

您是否尝试过*{box size:border box；}？是的，即使使用display:block，box size在LI上也确实不起作用。请确保它可以。。。当图元具有固定的宽度和/或高度时。元素类型不重要。谢谢，使用伪元素很有效！虽然在您的示例中，蓝色边框实际上仍然位于白色框的下方：），但我可以通过在div上使用插入框阴影来解决更简单的问题。@Kokodoko自从您要求边框时，我就使用了边框，并且使用了

底部：-6px您只需控制它应该在元素内部还是外部。。。对于这个示例，我选择了外部，因为边框很大，几乎与文本重叠，所以将其设置为
bottom:0将在里面。@Kokodoko我也重新阅读了你的问题，并用
框大小：边框框
的功能更新了我的答案