Question

请看一下这个简单的代码：

盒子的四个边都有一个内盒阴影。我需要盒子阴影只显示在左侧和底部。

如何更改此代码：

box-shadow: inset 0 0 9px 0 #000;

Answer 1

这有用吗，这应该可以跨浏览器工作。

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

}

这是原作者： http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

Answer 2

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

查看此页面： http://css-tricks.com/snippets/css/css-box-shadow/

Answer 3

通过对颜色和偏移的微小变化，它变得相当简单：

div { width: 300px; height: 300px; 

   box-shadow: inset 5px 5px 5px -3px #666;

}

jsFiddle。

Answer 4

我打算建议使用这样的负值：

div { width: 300px; height: 300px;
    /* Try this. */
    box-shadow: inset 4px -4px 7px -4px #000; 
}

第一个4px将阴影框向左推4px，如果你把它留在0那么隐藏你通常会在右边看到的东西。

第二个-4px值垂直向下推动阴影，再次隐藏顶部阴影。

较高的7px模糊值给了我超过我需要的值，但是如果我添加-4px的扩展，那么额外的模糊将被剪裁。只留下柔和的灰色阴影边缘，而不是通常会看到的硬黑色边缘。

在此处查看我的示例： http://jsfiddle.net/khalifah/vVUB5/

Answer 5

您无法仅将阴影应用于<div>的某些边，但您可以调整X和Y偏移，以便阴影在您不想要的边上剪裁。

这给了我在Safari中寻找的效果：

box-shadow: 7px -7px 9px #000 inset;

如何在div的两边做CSS3框阴影？

5 个答案: