Question

以下是我的jsfiddle，我试图在桌子上投下阴影。问题是阴影落在桌子的底部和右边，但没有放在桌子的左侧和顶部，请让我知道如何修改我小提琴的css，这样阴影就会在桌子的四周垂下。谢谢，

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Answer 1

重置x，y坐标：

-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
border-radius: 5px;

解释

第一个选项是x坐标，第二个选项是y。因此，将两者重置为0px都会让您居中。并且，增加传播，第三个值，将给你喜欢Photoshop。此外，提供一些border-radius将准确显示您的需求。

截图

小提琴：http://jsfiddle.net/7RQtq/4/

Answer 2

不了解旧版IE过滤器，但对于其他浏览器，您可以使用box-shadow: 0 0 16px #000;。前两个值表示偏移，第三个表示阴影模糊。

演示：http://jsfiddle.net/7RQtq/3/
生成器工具：http://www.webtutorialplus.com/box-shadow.aspx
规格：http://www.w3.org/TR/css3-background/#box-shadow

'box-shadow'属性将一个或多个阴影附加到   框。该属性是以逗号分隔的阴影列表，每个阴影都指定   2-4个长度值，一个可选颜色和一个可选的“插入”   关键词。省略的长度为0;省略的颜色是UA选择的颜色。

哪里=插入？＆安培;＆安培; [{2,4}＆amp;＆amp; ？ ]

每个组件的解释如下：



第一个长度是阴影的水平偏移。正值绘制一个偏移到框右侧的阴影，a   左侧负长度。



第二个长度是垂直偏移。正值会使阴影向下偏移，向下偏移阴影。



第三个长度是模糊半径。不允许使用负值。如果模糊值为零，则阴影边缘清晰。否则，   值越大，阴影边缘越模糊。见下文。



第四长度是展开距离。正值会使阴影形状在指定半径的所有方向上扩展。   负值会导致阴影形状收缩。见下文。注意   对于内部阴影，扩展阴影（创建更多阴影   区域）意味着收缩阴影的周长形状。


颜色是阴影的颜色。如果颜色不存在，则使用   颜色取自'color'属性。

正如您可能想象的那样，您可以使用这些值的组合创建复杂（且精细）的效果，例如：

Answer 3

前两个参数是x（右）和y（底部）traslation ...为中心阴影设置为0px：

http://jsfiddle.net/7RQtq/1/

-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;

投影问题

3 个答案:

重置x，y坐标：

解释

截图

小提琴：http://jsfiddle.net/7RQtq/4/