Html 为什么边界底部会被修剪？

我在列表中使用CSS为列表中的选定项显示实心边框。一切都很好，除了固体的左下角以倾斜的方式被切断，而它在顶部正确显示。我做错了什么

CSS:

.item{
列表样式：无；
宽度：-webkit填充可用；
光标：指针；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
高度：37px！重要；
字号：600；
边框底部：0.1px实心#e8e8e8；
右边距：200px；
}
.菜单{
背景#F8F9FA；
最小高度：100%；
浮动：左；
宽度：100%；
位置：绝对位置；
保险商实验室{
边际：0px；
列表样式：无；
填充：0px；
李{
字号：13.5px；
填充：10px；
}
李：悬停{
文字装饰：无；
背景色：#F3F5；
}
}
}
.启用{
背景色：#FFFFFF！重要；
右边框：5px实心#3081ed；
}

HTML:

测试1


测试2

---

这里有一个CSS和html标记的stackblitz附件。

问题：我已经检查了你的代码，除了这行

边框底部：0.1px solid\e8e8
由于
边框底部
，因此li元素具有立体感，这就是左侧弯曲的原因

解决方案：

要解决它，你应该删除底部边框，而不是使用CSS阴影；类似=>
box shadow:0px 0.1px#000

在您的代码中：

    .item {
        list-style: none;
        width: -webkit-fill-available;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 200px !important;
        font-weight: 600;
       /* border-bottom: 0.1px solid #e8e8e8; */      =>remove this line
        box-shadow: 0px 0.1px #000;                   =>add this line
        margin-right: 200px;
    }

      .enable {
         background-color: #FFFFFF !important;
         /* border-right: 5px solid #3081ed; */    =>remove this line
          position:relative;                       => add this line
      }

      li.item.enable::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 37px;
      position: absolute;
      right: 0;
      background: #3081ed;
   }

或者，您可以使用“before”或“after”创建新元素，以便在启用项目的右侧放置实心形状
在您的代码中：

    .item {
        list-style: none;
        width: -webkit-fill-available;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 200px !important;
        font-weight: 600;
       /* border-bottom: 0.1px solid #e8e8e8; */      =>remove this line
        box-shadow: 0px 0.1px #000;                   =>add this line
        margin-right: 200px;
    }

      .enable {
         background-color: #FFFFFF !important;
         /* border-right: 5px solid #3081ed; */    =>remove this line
          position:relative;                       => add this line
      }

      li.item.enable::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 37px;
      position: absolute;
      right: 0;
      background: #3081ed;
   }

好吧，你有一个边界底部设置。在CSS长方体模型中，所有边都有一个三角形的接合点。如果您看到过任何纯CSS三角形，它们使用相同的概念创建三角形。两者都有效，但第二个效果与预期一样；）谢谢不客气：）