Question

我为侧边栏设置了一个带有背景图像repeat-y的虚拟列。但是，我想在整个图像中添加阴影。我该怎么做呢？

我似乎无法弄明白。框阴影下方仅适用于侧边栏，但我希望它适用于整个home_navbg.jpg虚拟列。

<div id="wrapper">
   <div id="sidebar">
   </div>
   <div id="content">
   </div>
</div>

#wrapper {
    width: 100%;
    background: url('../img/home_navbg.jpg');
    background-repeat: repeat-y;
}
#sidebar {
    width: 240px;
    height: 100%;
    float:left;
    box-shadow: 0px 4px 20px #231F20;
    -webkit-box-shadow: 0px 4px 20px #231F20;
    -mox-box-shadow: 0px 4px 20px #231F20; 
}

编辑：最后，我只是将阴影放在背景图像本身。我猜CSS3无法做到这一切。

Answer 1

如果我理解正确，那么人造专栏似乎是“如何实现等高柱”问题的一个棘手（hacky？）解决方案。

CSS3有一个新的属性，可以做我想你想要实现的。它被称为box-flex：http://www.w3schools.com/css3/css3_pr_box-flex.asp

虽然浏览器支持有限（没有IE，Opera）。

这与你想要的相似吗？ http://jsfiddle.net/yuUKv/78/

实际上，使用人造柱的原因是什么？可能你会更好（浏览器支持明智......？）使用javascript解决方案（jQuery相对容易使用）来正确调整元素的高度。

Answer 2

这有效吗？：

http://jsfiddle.net/yuUKv/

100％的高度是父级高度的100％，在您的示例中，它只是内容的大小。

如何在人造栏边栏添加框阴影？

2 个答案: