边栏上有阴影

Bro*_*ato 1 html css jquery

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

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

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

谢谢

Did*_*hys 7

您使用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;
}
Run Code Online (Sandbox Code Playgroud)

演示

用途是:

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

影棚支撑桌