我的侧边栏上有一个影子

Question

我的页面上有一个右侧边栏，我想在这个侧边栏的左侧有一个阴影。像Google地图左侧边栏（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

Answer 2

这是css3插入阴影：

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

根据需要调整10px

Answer 3

您可以使用CSS，如下所示：

text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.5);

尝试使用它为您找到最佳设置=）

Answer 4

w3c不支持此功能：

.shadow {
   **-moz-box-shadow:    inset 0 0 10px #000000;**
   **-webkit-box-shadow: inset 0 0 10px #000000;**
   box-shadow:         inset 0 0 10px #000000;
}