2013-03-14 10 views
1

我想要一个矩形的DIV在四周都有一个阴影。如何制作CSS环绕投影?还是有一个好方法?用最少的胶带?

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

但是,我所看到的所有解决方案或在搜索中看到的证据都像管道胶带一样闻起来。是否足够强烈地设计了双面阴影,以便在没有胶带的情况下无法优雅地实施4面?

如果必须的话,我会使用胶带,但是我想知道是否有一种很好的方法可以在各种品牌的胶带之间进行选择。

回答

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

你也可以使用它与插入太多,使一个非常好的3d看起来的边缘。

+0

宾果; upvoted,并打算在9分钟后允许接受。谢谢, – JonathanHayward 2013-03-14 20:21:00

+0

没问题。我喜欢使用这些家伙的微妙版本:悬停。 – PlantTheIdea 2013-03-14 20:22:34

+0

没想过;我会很高兴让这个建议煨。 – JonathanHayward 2013-03-14 20:31:00

0

您可以将可选的传播值(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); 
} 
相关问题