html - 删除侧面一部分(百分比)的下拉框阴影？

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>

代码笔: https://codepen.io/anon/pen/EMjoYr

Answer 1

你可以通过给它一个背景颜色和一个比有 box-shadow 的元素更高的 z-index 来隐藏 active 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>