如何在基于960网格的布局中显示LI上的阴影？

Question

我正在尝试创建一个显示网格（960.gs）格式的产品列表的页面。为了匹配COMP，当用户在其上方悬停时，我需要在LI上显示阴影。

在悬停中显示投影很简单，但在COMP中显示它的方式结果很难完成，我需要一些帮助。

以下是我必须匹配的COMP的屏幕截图。

数字1到10是网格。我正在使用UL来创建行和LI来显示行中的产品项目。

<!-- loops n times for n rows -->
<UL class="container_10 clearfix">
    <!-- loops 5 times for 5 list items in a row -->
    <LI class="grid_2 product">
        <UL>
            <LI class="prodImg clearfix">...</LI>
            <LI class="prodTitle clearfix">...</LI>
            <LI class="prodPrice clearfix">...</LI>
            <LI class="prodPromo clearfix">...</LI>
            <LI class="prodReviews clearfix">...</LI>
        </UL>
    </LI>
</UL>

从屏幕截图中可以看出，阴影从网格布局中流出......我现在已经知道如何将其合并到这里。

编辑：根据项目要求，我们只支持现代浏览器，所以不用担心IE6或其他垃圾浏览器，我可以使用CSS3：）

Answer 1

如果您将position:relative添加到LI标签，则可以在其中添加一个绝对位于外部并位于产品图片和信息下的html元素。

如果您想避免添加其他html元素，您甚至可以使用li:after添加它。我不知道这是否足够清楚，如果没有，请问，我会尝试提供一个有效的例子。

Answer 2

由于您不需要容纳不太适合的浏览器，我会使用伪元素和CSS box-shadow的组合：

CSS:
.product {
  position: relative;
}
.product:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.product:hover:after {
  box-shadow: 0 0 5px #CCC;
}

.product:after声明在相对于.product元素定位的文档流之外创建一个元素。 .product:hover:after声明会创建投影。调整测量值等以适合您的模型。

以下是一个示例：http://jsfiddle.net/blineberry/SMqDx/

Answer 3

您是否可以在悬停时使用box-shadow为产品框留下阴影？

.product li:hover{
    box-shadow: 0 0 5px black; /* Whatever size shadow you need */
}

类似代码示例：http://jsfiddle.net/6zcqZ/

修改

看起来您可能想要使用框阴影的<spread>属性，如下所示：

box-shadow: [x-offset] [y-offset] [blur value] [spread value] [color];

所以，而不是上面的you could simply add the spread value，例如：

box-shadow: 0 0 5px 5px black;