如何向人造列侧边栏添加框阴影？答案

【问题标题】：How do I add a box shadow to the faux column sidebar?如何向人造列侧边栏添加框阴影？
【发布时间】：2011-03-29 02:13:47
【问题描述】：

我有一个带有背景图像重复-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 不能做到这一切。

【问题讨论】：

你的盒子阴影效果放在侧边栏规则里，如果你想把它应用到home_navbg.jpb容器中，为什么不放在包装器里呢？
因为包装也包含内容，所以只有一部分是侧边栏。

标签： html css frontend

【解决方案1】：

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

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

虽然它对浏览器的支持有限（没有 IE、Opera）。

这和你想要的一样吗？ http://jsfiddle.net/yuUKv/78/

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

【讨论】：

【解决方案2】：

这行得通吗？：

http://jsfiddle.net/yuUKv/

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

【讨论】：

克雷格，感谢您的意见。它非常接近。如果我在首屏下方添加内容，则侧边栏不会向下更远。请参阅：jsfiddle.net/yuUKv/1 有什么想法吗？