你如何在前面获得一个 CSS 插入框阴影？答案

【问题标题】：How do you get a CSS inset box shadow on front?你如何在前面获得一个 CSS 插入框阴影？
【发布时间】：2012-04-10 18:56:51
【问题描述】：

我有一个清单：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Citrus</li>
</ul>

当我在<li> 节点上放置背景颜色时，<ul> 节点上的框阴影（插图）将被隐藏。有没有办法让<ul> 的内阴影出现在前景上，这样它就会与<li> 节点的背景颜色重叠？

应要求提供示例：http://jsfiddle.net/JbAEL/ 将鼠标悬停在项目上，您将看到红色背景颜色将与内部阴影重叠，从而消除效果。

【问题讨论】：

请使用jsfiddle.net设置示例
您可以使用z-index 来更改图层顺序 - 但这可能会导致以后出现问题（例如，如果您正在使用链接）。是你没有把背景颜色放在<ul /> 上的原因是<li />s 需要不同的颜色吗？
@Bogdan 见上面的链接。 z-index 不起作用:(

标签： css foreground

【解决方案1】：

谈论一种肮脏的方法，因为没有foreground 属性；）我决定将UL 节点设为相对节点，并在其上附加一个带有内部阴影的div 绝对节点。

对于工作版本： http://jsfiddle.net/JbAEL/14/

【讨论】：

我不得不删除我的赞成票，好像 ul 是可滚动的，阴影不会跟随，请参阅：jsfiddle.net/6vtra4ng。不错的尝试:)

【解决方案2】：

您的lis 中的background-color 落在阴影之上。如果要保留阴影，可以使背景颜色稍微透明。尝试将background-color:red 更改为background-color: rgba(255,0,0,0.1)，例如，最后一个值是不透明度。这样保留了inset box-shadow，但是颜色叠加会变得有点淡。

【讨论】：

【解决方案3】：

HTML 和 CSS 依赖于一组严格的定义逻辑，不幸的是，没有办法通过 z-index 对元素的内容和背景进行排序，它们彼此独立，并将它们与不同的元素交织在一起（据我所知）我知道）。

这是一种建议的方法，它不是最理想的解决方案，但有时违反规则会导致变脏。将阴影应用到您的每个 li 元素并根据列表中的哪个元素滑动阴影：顶部、底部或中间的任何元素。

HTML

<ul>
    <li><div>Elephant</div></li>
    <li><div>Monkey</div></li>
    <li><div>Snake</div></li>
    <li><div>Zebra</div></li>
</ul>

CSS

li
{
    overflow:hidden; height:30px;
}

li div /* middle items (default) */
{
    box-shadow                : inset 0px 0px 10px #000000;
    -ms-box-shadow            : inset 0px 0px 10px #000000;
    -moz-box-shadow            : inset 0px 0px 10px #000000;
    -webkit-box-shadow        : inset 0px 0px 10px #000000;
    line-height:30px; height:30px; margin-top:-30px; padding:30px 10px;
}

li:first-child div /* top item */
{
    margin-top:0; padding-top:0; padding-bottom:60px;
}

li:last-child div /* bottom item */
{
    margin-top:-60px; padding-top:60px; padding-bottom:0;
}

您可以在以下jsFiddle 看到完整的代码和演示，并且在 Firefox 11 和 IE9 中似乎可以正常工作，但不能保证其他浏览器。

【讨论】：