0

以下是我试图在桌子上投下阴影的 jsfiddle。问题是阴影落在桌子的底部和右侧，但不在桌子的左侧和顶部，请告诉我如何修改小提琴的 css，以便阴影会落在桌子的所有侧面。谢谢，

http://jsfiddle.net/7RQtq/

.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');
}
4

3 回答 3

3

重置 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/

于 2012-12-29T18:02:16.387 回答
1

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

'box-shadow' 属性将一个或多个阴影附加到盒子上。该属性是一个以逗号分隔的阴影列表，每个阴影由 2-4 个长度值、一个可选颜色和一个可选的“inset”关键字指定。省略的长度为 0；省略的颜色是 UA 选择的颜色。

哪里=插图？&& [ {2,4} && ? ]

每个组件的解释如下：

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

  2. 第二个长度是垂直偏移。正值抵消阴影向下，负值向上抵消。

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

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

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

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

于 2012-12-29T18:02:22.927 回答
1

前两个参数是 x（右）和 y（下）平移...将它们设置为 0px 以获得居中的阴影：

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

-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
于 2012-12-29T18:03:39.400 回答