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

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

试试这个 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);
}

Answer 2

您可以通过给它一个背景颜色和一个比有框阴影的元素更高的 z-index 来隐藏活动 li 下的框阴影：

请注意，我还添加了结束 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>

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

Delete drop box shadow for a part (percentage) of the side?

html

css

box-shadow