想要避免使用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之类的预处理器来自动执行此操作。 让我知道您是否想要这样做。

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

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

另外，如果您愿意反转标记中列表项的顺序（grim，但可能是可接受的），则可以使用flexbox（特别是flex-direction属性）来颠倒元素沿主元素flex-direction的顺序轴。

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

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