只有底部的盒子阴影

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;
}

资源

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;
        }