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

Question

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

问题是当我将box shadow应用于描述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

您可以隐藏活动li下的框阴影，为其提供背景颜色和比具有框阴影的元素更高的z-index：

请注意我还添加了一个结束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);
}