如何制作CSS环绕投影?还是有好方法吗?用胶带最少?

时间:2013-03-14 20:15:21

标签: html css css3 dropshadow

我想要一个矩形DIV,四面都有一个阴影。

现在我可以通过使用容器div获得我想要的东西,并且有一个带有正值的阴影和带有负值的阴影;我还没有看到我可以推动的东西。因为这是在样板代码中完成的,所以我可以使用一系列具有不同边框颜色的嵌套DIV,即旧的CSS前导方式。有些方法我可以为四个DIV制作四个投影。例如,请参阅“CSS shadows on 3 sides。”

然而,我所看到的所有解决方案,或者在搜索中看到的证据,都像胶带一样闻起来。是否有足够的阴影设计用于2面,如果没有胶带,4面不能正常实现?

如果必须的话,我会使用胶带,但在选择胶带品牌之前,我宁愿知道是否有一个好办法。

2 个答案:

答案 0 :(得分:1)

你想要有更多的开销,悬停阴影?

.shadow {
    -webkit-box-shadow:0 0 10px rgb(0,0,0);
    -moz-box-shadow:0 0 10px rgb(0,0,0);
    box-shadow:0 0 10px rgb(0,0,0);
}

您也可以将它与插图一起使用,使边缘看起来非常漂亮。

答案 1 :(得分:0)

您只需在语法中添加可选的 spread 值(10px)即可。像这样:

.dropshadow {
-webkit-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
}