想避免使用CSS box-shadow隐藏前面的li元素

Question

我有一个列表，其中每个元素后面都有一个框阴影，使其在某些背景下突出显示：

html {
  background: black;
}

span {
  background: white;
  box-shadow: 2px 0 0 white, -2px 0 0 white, 2px 10px 0 white, 2px 20px 0 white, 2px 30px 0 white, 2px 40px 0 white, 2px 50px 0 white;
}

<ul>
  <li><span>California</span></li>
  <li><span>Idaho</span></li>
  <li><span>Maine</span></li>
  <li><span>Oregon</span></li>
</ul>

但是，如果我尝试使用向上而不是向下，则它会覆盖前一个元素的文本：

html {
  background: black;
}

span {
  background: white;
  box-shadow: 2px 0 0 white, -2px 0 0 white, 2px -10px 0 white, 2px -20px 0 white, 2px -30px 0 white, 2px -40px 0 white, 2px -50px 0 white;
}

<ul>
  <li><span>California</span></li>
  <li><span>Idaho</span></li>
  <li><span>Maine</span></li>
  <li><span>Oregon</span></li>
</ul>

有什么方法可以避免这种情况，并且盒子阴影总是在文本后面吗？感谢。

Answer 1

这不是最好的解决方案，即使到目前为止也没有，但它应该让你前进

html {
  background: black;
}

span.h {
  position: absolute;
  z-index: 0;
  background: white;
  box-shadow: 2px 0 0 white, -2px 0 0 white, 2px -10px 0 white;
}

span.i {
  z-index: 1;
  position: relative;
}

<ul>
  <li><span class='h'>California</span><span class='i'>California</span></li>
  <li><span class='h'>Oregon</span><span class='i'>Oregon</span></li>
  <li><span class='h'>Washington</span><span class='i'>Washington</span></li>
  <li><span class='h'>Idaho</span><span class='i'>Idaho</span></li>
</ul>

Answer 2

你可以添加一个CSS ......

ul li{margin:10px 0;}

Answer 3

我能想到的每一个解决方案都有一些不幸的妥协。

无聊，不可扩展的答案是使用降序z-index。您可以使用SASS之类的预处理器（如果您事先知道最大项目数）或JavaScript自动执行此操作;如果您想要这样做，请告诉我。

＆＃13;

＆＃13;

html {
  background: black;
}

span {
  background: white;
  box-shadow: 2px 0 0 white, -2px 0 0 white, 2px -10px 0 white, 2px -20px 0 white, 2px -30px 0 white, 2px -40px 0 white, 2px -50px 0 white;
}

li {
  position: relative;
  z-index: 4;
}

li:nth-child(2) {
  z-index: 3;
}

li:nth-child(3) {
  z-index: 2;
}

li:nth-child(4) {
  z-index: 1;
}

＆＃13;

<ul>
  <li><span>California</span></li>
  <li><span>Idaho</span></li>
  <li><span>Maine</span></li>
  <li><span>Oregon</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或者，如果您愿意反转标记中列表项的顺序（严格，但可能是可接受的），您可以使用flexbox（特别是flex-direction属性 - 来颠倒顺序）哪些元素沿主轴定向。

＆＃13;

＆＃13;

html {
  background: black;
}

ul {
  display: flex;
  flex-direction: column-reverse;
}

span {
  background: white;
  box-shadow: 2px 0 0 white, -2px 0 0 white, 2px -10px 0 white, 2px -20px 0 white, 2px -30px 0 white, 2px -40px 0 white, 2px -50px 0 white;
}

＆＃13;

<ul>
  <li><span>Oregon</span></li>
  <li><span>Maine</span></li>
  <li><span>Idaho</span></li>
  <li><span>California</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;