我在摆弄CSS box shadow属性。当我将角度保持在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
}

最佳答案

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

关于css - CSS框阴影查询,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23920742/

10-13 02:56