在整个DIV周围添加CSS盒子的阴影

是否有可能将阴影包围整个DIV？在整个DIV周围添加CSS盒子的阴影

-moz-box-shadow: 3px 3px 3px #ccc; 
-webkit-box-shadow: 3px 3px 3px #ccc; 
box-shadow: 3px 3px 3px #ccc;

我知道属性的顺序云：

水平偏移
垂直偏移
模糊半径
颜色

但我不知道是否有可能使阴影四处走动而不是显示只在一个边或一边上。

来源

2011-07-25 Warface

为什么5px的模糊为Mozilla和WebKit但3px的为他人？ – BoltClock

因为我在Chrome上进行测试时，所以我只改变了盒子阴影...对不起 – Warface

零偏移？

-moz-box-shadow: 0 0 3px #ccc; 
-webkit-box-shadow: 0 0 3px #ccc; 
box-shadow: 0 0 3px #ccc;

来源

2011-07-25 19:35:54 BoltClock

在IE <8不起作用。任何解决方法？ – Si8

@ SiKni8是的，图片... –

+57

是啊@ SiKni8卸载并获得一个新的浏览器。 – 2014-03-21 23:28:17

是的，不垂直或水平偏移，并使用一个比较大的模糊半径：fiddle

此外，您还可以使用多个箱的阴影，如果你用逗号将它们分开。这将允许您调整模糊的位置和延伸的位置。我所提供的例子是从一个大outline别无二致，但它可以显著更多的微调：fiddle

你错过的box-shadow最后和最相关的属性，这是spread-distance。您可以指定阴影多少膨胀或收缩值（使我的第二个例子过时）：fiddle

完整的属性列表是：

的box-shadow：[水平偏移] [垂直偏移] [模糊半径] [传播距离] [颜色]插入？

但更好的是，通读了spec。

来源

2011-07-25 19:37:07 zzzzBov

只需使用下面的代码。它将阴影包围整个DIV

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

希望这将工作

来源

2015-02-27 07:07:18

在整个DIV周围添加CSS盒子的阴影

回答

相关问题