Html CSS:Shadow-creating with:after正在流血

我正在尝试做一个标签文件夹的设计，标签在左边，除了不活动的标签外，所有的东西都使用框阴影。我的问题是，我正在为活动选项卡创建的阴影是使用以下方法创建的：之后，由于它是一个新的堆叠上下文，它正在向内容区域溢出

 nav li.active:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: -1;
   left: 0;
   top: 0;
   box-shadow: 0px 0 10px rgba(0,0,0,0.5);
 }

之前我有一个解决方案，我在活动选项卡上放置了一个白色框来覆盖由框阴影创建的右侧阴影，但我不满意，所以我尝试了另一种方法，但似乎无法实现

这是代码笔和我的代码模型

所以一个大问题是，有人知道一个好方法可以在布局周围获得阴影，而不让阴影溢出到内容区域吗

 nav li.active:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: -1;
   left: 0;
   top: 0;
   box-shadow: 0px 0 10px rgba(0,0,0,0.5);
 }

---

编辑：我完全支持其他想法，然后使用a:after。我唯一想避免的就是创建一个阴影对象，并用javascript定位它，或者使用javascript来完成这项工作。

从

li.active

中删除z-index，或者将其作为负值，这将使它落后于

部分

nav li.active {
  background: #fff;
  right: -4px;
  z-index: -999;
}

---

从

li.active中删除z索引

或将其作为负值，这将使其位于

部分之后

nav li.active {
  background: #fff;
  right: -4px;
  z-index: -999;
}

---

更新：请检查。

这次我使用了使用Adobe Photoshop创建的阴影图像作为

：after

psuedo选择器的背景图像

nav{
显示：内联块；
垂直对齐：顶部；
}
导航ul{
浮动：右：
}
李海军{
列表样式类型：无；
显示：块；
边缘底部：9px；
背景：#ff0；
位置：相对位置；
右：-5px；
填充物：5px；
}
导航李{
背景：#fff；
右：-4px；
z指数：2；
}
李导航。激活：在{
内容：“；
宽度：70px；
高度：48px；
位置：绝对位置；
z指数：-1；
顶部：-10px；
背景：url(http://s28.postimg.org/6lkx1r7gp/bgshadow.png);
左：-20px；
不透明度：0.6
}
部分{
背景：#fff；
宽度：500px；
高度：200px；
盒影：0.10px rgba（0,0,0,0.5）；
z指数：1；
位置：相对位置；
显示：内联块；
}

测试
测试2
测试3

更新：请检查。

这次我使用了使用Adobe Photoshop创建的阴影图像作为

：after

psuedo选择器的背景图像

nav{
显示：内联块；
垂直对齐：顶部；
}
导航ul{
浮动：右：
}
李海军{
列表样式类型：无；
显示：块；
边缘底部：9px；
背景：#ff0；
位置：相对位置；
右：-5px；
填充物：5px；
}
导航李{
背景：#fff；
右：-4px；
z指数：2；
}
李导航。激活：在{
内容：“；
宽度：70px；
高度：48px；
位置：绝对位置；
z指数：-1；
顶部：-10px；
背景：url(http://s28.postimg.org/6lkx1r7gp/bgshadow.png);
左：-20px；
不透明度：0.6
}
部分{
背景：#fff；
宽度：500px；
高度：200px；
盒影：0.10px rgba（0,0,0,0.5）；
z指数：1；
位置：相对位置；
显示：内联块；
}

测试
测试2
测试3

我猜你的意思是这样的：

演示：

CSS:

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

---

我猜你的意思是这样的：

演示：

CSS:

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

---

在不同的地方发现了这两把小提琴

应该适用于IE8+：

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

解决方案：

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

---

在不同的地方发现了这两把小提琴

应该适用于IE8+：

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

解决方案：

nav li.active:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  box-shadow: -3px  0  2px rgba(0,0,0,0.20), 
    -3px  -3px  2px rgba(0,0,0,0.10), 
    -3px  3px  2px rgba(0,0,0,0.10);
}

.shadow.clip-right {
    /*-blur, parent width, parent height+blur, -blur*/
    clip: rect(-8px, 100px, 108px, -8px);
}

---

我也试过了，但最后我的一边有一个阴影，比其他所有的边都大，而且在li和部分之间没有一条很小的阴影线真的很棘手。这是一个很好的解决方案，它完全可以工作，但我的主要目标是尝试用纯html和css实现这个效果。也许这是不可能的，如果是这样，我可能会使用你的解决方案。谢谢。我也试过这样做，但我最后发现一侧的阴影比所有其他一侧都大，而且在li和部分之间没有一条很小的阴影线真的很棘手。这是一个很好的解决方案，它完全有效，但我的主要目标是尝试用纯html和css实现这一效果。也许这是不可能的，如果是这样，我可能会使用你的解决方案。谢谢。然后阴影部分会流到项目上。我想要一个平滑的过渡，你看不到，所以它看起来像是项目和内容是相同的页面，但有一个皮瓣。然后阴影部分出血的项目。我想要一个你看不到的平滑过渡，这样看起来项目和内容是同一个页面，但是有一个翻盖。如果我正手知道项目的宽度，剪辑解决方案会非常有效，但是因为我不知道，我不想使用javascript，所以它对我不起作用。无论如何，谢谢。如果我知道正手拍时的项目宽度，剪辑解决方案会非常有效，但是因为我不知道，也不想使用javascript，所以它对我不起作用。无论如何，谢谢你。