CSS框阴影查询

Question

我正在摆弄 CSS 框阴影属性。当我将 Angular 保持在 90 度并从底部应用一些距离时，似乎我无法拥有顶部边框阴影。有什么方法可以让顶部阴影和底部阴影一起出现。

这是 FIDDLE

<div class = "someclass">
</div>

.someclass {
    -webkit-box-shadow: 0 8px 11px -5px #000;
    -moz-box-shadow: 0 8px 11px -5px #000;
    box-shadow: 0 8px 11px -5px #000;
    margin: 20px;
    background: pink;
    width:300px;
    height:300px
}

Answer 1

box-shadow 允许多个逗号分隔值。你可以这样实现你想要的效果:

.someclass {
    box-shadow: 0 8px 11px -5px #000,
                0 -8px 11px -5px #000;
}

确保也将它添加到适当的前缀声明中:

.someclass {
    -webkit-box-shadow: 0 8px 11px -5px #000,
                        0 -8px 11px -5px #000;
    -moz-box-shadow: 0 8px 11px -5px #000,
                     0 -8px 11px -5px #000;
    box-shadow: 0 8px 11px -5px #000,
                0 -8px 11px -5px #000;
}