Question

我有一盒内容，需要为此提供影子。但我只想给盒子的底部留下阴影。我使用了css box-shadow: 0 3px 5px #000000;

如果我给出这个代码，它会显示左，右和底。我只需要底部

任何人都可以建议解决这个问题。非常感谢

Answer 1

添加课程one-edge-shadow后，您可以执行以下操作，也可以根据需要使用。

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

<强> Source

Answer 2

您必须在框阴影中指定negative spread才能删除侧影

-webkit-box-shadow: 0 10px 10px -10px #000000;
   -moz-box-shadow: 0 10px 10px -10px #000000;
        box-shadow: 0 10px 10px -10px #000000;

查看http://dabblet.com/gist/9532817并尝试更改属性并了解其行为

Answer 3

您可以根据需要使用它：

        .top {
            box-shadow: 0 -5px 5px -5px #333;
        }

        .right {
            box-shadow: 5px 0 5px -5px #333;
        }

        .bottom {
            box-shadow: 0 5px 5px -5px #333;
        }

        .left {
            box-shadow: -5px 0 5px -5px #333;
        }

        .all {
            box-shadow: 0 0 5px #333;
        }

Answer 4

尝试使用在线生成器css3.me 更改值并获取代码，非常简单。

Answer 5

-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;

Answer 6

指定负值到点差值。这对我有用：

box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);

只有底部的盒子阴影

6 个答案: