边栏上有阴影

Question

我的页面上有一个右侧边栏，并且我想在此侧边栏的左侧有一个阴影。阴影非常浅，类似于Google Maps左侧栏（http://maps.google.be）上显示的阴影。可能吗？

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

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

谢谢

Answer 1

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

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

演示

用途是：

1. 阴影的水平偏移量，正数表示阴影在框的右侧，负偏移量将阴影放在框的左侧。
2. 阴影的垂直偏移量，负数表示阴影在框的上方，正数表示阴影在框的下方。
3. 模糊半径（可选），如果将其设置为0，则阴影将变得清晰，数字越大，模糊度越大。
4. 扩展半径（可选），正值增加阴影的大小，负值减小阴影的大小。默认值为0（阴影与模糊大小相同）。
5. 颜色

影棚支撑桌