如何向人造列侧边栏添加框阴影？
我有一个侧边栏的人造列，带有背景图像重复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 无法完成这一切。
I have a faux column for the sidebar with a background image repeat-y. However, I would like to add a drop shadow to the entire image. How do I do this?
I can't seem to be able to figure it out. Below the box shadow applies only to the sidebar, but I want it to apply to the entire home_navbg.jpg faux column.
<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;
}
Edit: In the end, I just put the drop shadow in the background image itself. I guess CSS3 can't do it all.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我理解正确的话，假列似乎是“如何实现等高列”问题的一个棘手（hacky？）解决方案。
CSS3 有一个新的属性，可以实现我认为您想要实现的目标。
它称为 box-flex： http://www.w3schools.com/css3/css3_pr_box- flex.asp
虽然它的浏览器支持有限（没有 IE、Opera）。
这和你想要的相似吗？
http://jsfiddle.net/yuUKv/78/
实际上，使用人造列的原因是什么？也许你会更好（浏览器支持方面......？）使用 javascript 解决方案（jQuery 相对容易使用）来正确调整元素的高度。
The faux column seems to be a tricky (hacky?) solution to the "how to achieve equal height columns" problem, if I understand it correctly.
CSS3 has new a property that could do what I assume you would like to achieve.
It is called box-flex: http://www.w3schools.com/css3/css3_pr_box-flex.asp
Though it has limited browser support (no IE, Opera).
Is this similar to what you want?
http://jsfiddle.net/yuUKv/78/
Actually, what is the reason to use faux column? Probably you would be better (browser support wise...?) off using a javascript solution (jQuery is relatively easy to use) to properly adjust height of elements.
这有效吗？：
http://jsfiddle.net/yuUKv/
100% 高度是 100%父母的高度，在您的示例中只是内容的大小。
Does this work?:
http://jsfiddle.net/yuUKv/
The 100% height is 100% of the parent's height which in your example is only the size of the content.