CSS：影子创作：在流血之后

Question

我正在尝试制作一个标签文件夹设计，左侧有标签，并使用除了非活动标签之外的整个框的阴影框。我的问题是我为活动标签创建的阴影是使用以下创建的：之后由于它是一个新的堆叠上下文，它正在流入内容区域。

 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);
 }

我之前有一个解决方案，我把一个白色的盒子盖住了活动标签上的盒子阴影所产生的正确阴影，但我不满意，所以我试着寻找另一种方法，但似乎无法得到它工作。

这是带有我的代码模型的codepen。

http://codepen.io/anon/pen/zmabC

所以最重要的问题是，有没有人知道在布局周围留下阴影的好方法，而不会让阴影流到内容区域。

编辑：我完全接受其他想法然后使用：after。我唯一想要避免的是创建一个阴影对象并使用javascript定位它或者使用javascript完成此任务。

Answer 1

更新：请检查。

我这次使用Adobe Photoshop创建的阴影图像作为:after伪造选择器的背景图像。

＆＃13;

＆＃13;

nav {
  display: inline-block;
  vertical-align: top;
}

nav ul {
  float: right:
}

nav li {
  list-style-type: none;
  display: block;
  margin-bottom: 9px;
  background: #ff0;
  position: relative;
  right: -5px;
  padding: 5px;
}

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

nav li.active:after {
  content: "";
  width: 70px;
  height: 48px;
  position: absolute;
  z-index: -1;
  top: -10px;
  background: url(http://s28.postimg.org/6lkx1r7gp/bgshadow.png);
  left: -20px;
  opacity: 0.6
}

section {
  background: #fff;
  width: 500px;
  height: 200px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 1;
  position: relative;
  display: inline-block;
}

＆＃13;

<div>
  <nav>
    <ul>
      <li class="active">Test</li>
      <li>Test 2</li>
      <li>Test 3</li>
    </ul>
  </nav>
  <section>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我猜你的意思是这样的：

DEMO：http://codepen.io/anon/pen/peuFc

<强> 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);
}

Answer 3

从li.active移除z-index或将其设为负值，将其置于section

之后

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

Answer 4

在不同的thread

中找到这两个小提琴

适用于IE8 +：

http://jsfiddle.net/CVxnZ/

http://jsfiddle.net/76774540/

解决方案：

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