Question

我有一个清单：

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

当我在<li>节点上放置背景颜色时，<ul>节点上的box-shadow（插入）将被隐藏。有没有办法可以在前景上获得<ul>的内部阴影，这样它会与<li>个节点的背景颜色重叠？

请求此处是样本：http://jsfiddle.net/JbAEL/ 将鼠标悬停在项目上方，您将看到红色背景颜色与内部阴影重叠，从而消除效果。

Answer 1

讨论一种肮脏的方法，因为没有foreground属性;）我决定使UL节点相对，用绝对的div节点附加它来携带内部阴影。

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

Answer 2

HTML＆amp; 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中正常工作，但无法保证其他浏览器。

Answer 3

background-color的{{1}}落在阴影之上。如果要保留阴影，可以使背景颜色略微透明。尝试将li更改为background-color:red，最后一个值是不透明度。这样可以保留插入框阴影，但颜色叠加会变得有些模糊。

你如何在前面获得CSS插入框阴影？

3 个答案: