删除侧面的一部分（百分比）的投影框阴影？

Question

想象一下基于选项卡的列表选择，其中活动元素（li）正在获得额外的框阴影。另外，底部（描述）具有相同的框阴影，以伪造所选标签和具有框阴影并突出的描述div。

问题是，当我在描述div上应用框阴影时，它也会在活动的li元素上投下阴影，从而破坏了对文件夹的模仿。

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
  border-right: 0;
}

.desc {
  border: 1px solid red;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

Codepen： https://codepen.io/anon/pen/EMjoYr

Answer 1

您可以通过将背景阴影和z-index设置为比具有box-shadow的元素高的z阴影来隐藏活动li下的box shadow：

请注意，我也添加了一个结尾ul标记，因为您的问题中缺少该标记

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  background:white;  /* match background colour of page */
  position:relative; /* add this for z-index to work */
  z-index:1;         /* add this to go ovber top of box shadow */
  border-bottom: 1px solid white;   /* this is to cover the bottom line */
  margin-bottom:-1px;               /* move the border over the line */ 
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
 
}

.desc {
  border: 1px solid red;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
  </ul>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

如果您需要去除由活动选项卡引起的阴影，我可以用一个伪元素覆盖它（并在文本框中添加填充）：

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  /* match background colour of page */
  background: white;
  /* add this for z-index to work */
  position: relative;
  /* add this to go ovber top of box shadow */
  z-index: 1;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

.list li.active:after {
  content: '';
  display: block;
  /* height of desc padding */
  height: 20px;
  position:absolute; 
  top:100%;
  left:0; right:0;
  background: white;
}

.desc {
  border: 1px solid red;
  padding: 20px;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
  </ul>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

Answer 2

尝试使用此CSS。您当然可以更改阴影的颜色和不透明度：）

.list ul,
.list li {
  margin: 0;
  padding: 0;   
}

.list ul {
    border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
    box-shadow: 0px -10px 30px 1px rgba(62, 57, 107, .77);
  border-right: 0;
}

.desc {
  border: 1px solid red;
  border-top: 0;
   box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .5);
}