如何移除侧边部分区域box shadow？解决标签栏阴影覆盖激活项问题

我来帮你搞定这两个CSS box shadow的问题，分两部分说清楚：

一、移除元素侧边某一百分比区域的box shadow #

CSS原生的box-shadow属性没法直接只移除侧边的一部分阴影，但我们可以用clip-path这个属性来实现裁剪效果——它能把元素（包括阴影）的可视区域按我们的需求切掉一部分。

举个例子，如果你想移除右侧20%的阴影区域，只需要给目标元素加上：

clip-path: inset(0 20% 0 0);

inset的语法是inset(top right bottom left)，四个值分别对应上、右、下、左四个方向的裁剪比例（支持百分比或固定值）。

把这个方法用到你的.active li上，修改后的样式如下：

.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;
  /* 移除右侧20%的阴影区域 */
  clip-path: inset(0 20% 0 0);
}

如果要移除左侧的部分阴影，就调整left参数，比如inset(0 0 0 20%)即可。

二、修复标签页文件夹效果的阴影覆盖问题 #

你遇到的.desc阴影覆盖激活态<li>的问题，本质是元素层级（z-index）的问题：默认情况下，HTML中后出现的元素会覆盖前面的元素，所以.desc会压在激活态<li>的上方。

解决这个问题只需要两步：

1. 给所有<li>添加position: relative;——因为z-index只对非static定位的元素生效，而inline-block默认是static定位，必须先开启相对定位才能让层级设置生效。
2. 给激活态的<li>设置z-index: 1;，把它的层级提上去，让它在.desc的上方。

修改后的完整CSS代码：

.list ul, .list li { margin: 0; padding: 0; }
.list ul { border: 1px solid red; }
.list li { 
  display: inline-block; 
  padding: 20px 10px; 
  border-right: 1px solid red;
  position: relative; /* 开启相对定位，让z-index生效 */
}
.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; 
  z-index: 1; /* 提升层级，避免被.desc的阴影覆盖 */
}
.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); 
}

另外，你的HTML代码里有个小错误：<ul>标签没有闭合，我已经补上了</ul>，不然会导致布局异常，完整的HTML如下：

<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>

这样调整后，激活态的<li>就会稳稳地压在.desc上方，阴影不会被覆盖，完美模拟出文件夹突出的效果啦！

内容的提问来源于stack exchange，提问作者Dom