jquery - 在我的侧边栏上有阴影

Question

我的页面上有一个右侧边栏，我想在这个边栏的左侧有一个阴影。一个非常轻的阴影，就像谷歌地图左侧边栏 (http://maps.google.be) 上显示的那样。可能吗？

这是一个有想法的jsFiddle:http://jsfiddle.net/yhfXX/3/

通常侧边栏应该占据整个高度，但这个 jsFiddle 只是一个例子。

谢谢

Answer 1

您使用 box-shadow CSS 规则创建投影。

#sidebar {
  -moz-box-shadow:    -3px 0 5px 0 #555;
  -webkit-box-shadow: -3px 0 5px 0 #555;
  box-shadow:         -3px 0 5px 0 #555;
}

DEMO

用途是:

1. 阴影的水平偏移量，正值表示阴影位于框的右侧，负值表示阴影位于框的左侧。
2. 阴影的垂直偏移，负数表示阴影在盒子上方，正数表示阴影在盒子下方。
3. 模糊半径(可选)，如果设置为0，阴影会很锐利，数字越大，越模糊。
4. 传播半径(可选)，正值增加阴影的大小，负值减小大小。默认值为 0(阴影与模糊大小相同)。
5. 颜色

Box-shadow support table