如何为Div添加左侧内部边框？hover状态边框不显示求助

我找了好多用box-shadow实现内部边框的帖子，除了带真实阴影效果的方案，找不到能给Div加1px特定颜色单左侧内部边框的可行办法。现有示例都是全边或右下侧边框，只有一篇用无序列表的帖子提过单侧边，但没法适配到当前场景。

原容器CSS代码 #

.navContainer {
  line-height: 24px;
  vertical-align: middle;
  width: 296px;
  height: 40px;
  background-color: #FFFFFF; 
  opacity: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

需求与问题 #

希望用户hover时，容器左侧内部边缘显示1px深紫色（#611E90）的竖线边框。我原本写的hover样式代码如下，但完全没有边框显示：

.navContainer:hover {        
  background-color: #F9F2FE; 
  -webkit-box-shadow: inset 1px 0px 0px -1px #611E90; 
  -moz-box-shadow: inset 1px 0px 0px -1px #611E90; 
  box-shadow: inset 1px 0px 0px -1px #611E90;
}

原HTML代码 #

<div class="navContainer">
  <div class="navPending"></div>
  <a href="intranet-page-url" target="_blank">Product overview</a>
</div>

解决方案 #

问题出在box-shadow的参数设置上：第四个参数（扩散半径）设为-1px会把阴影缩小到不可见。要实现左侧内部1px边框，调整参数即可：

修改后的hover样式：

.navContainer:hover {
  background-color: #F9F2FE;
  box-shadow: inset 1px 0 0 #611E90;
}

参数说明 #

• inset：指定为内部阴影
• 1px：水平偏移量，向右偏移1px，刚好贴合容器左侧内部边缘
• 0：垂直偏移量，保持水平
• 0：模糊半径，设为0让边框清晰无模糊
• #611E90：边框颜色

修改后的完整代码 #

CSS #

.navContainer {
  line-height: 24px;
  vertical-align: middle;
  width: 296px;
  height: 40px;
  background-color: #FFFFFF;
  opacity: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

.navContainer:hover {
  background-color: #F9F2FE;
  box-shadow: inset 1px 0 0 #611E90;
}

HTML #

<div class="navContainer">
  <div class="navPending"></div>
  <a href="intranet-page-url" target="_blank">Product overview</a>
</div>

这样修改后，hover时容器背景变为#F9F2FE，左侧内部会出现1px的深紫色竖线边框，完全符合需求。

内容的提问来源于stack exchange，提问作者MartinS