在整個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盒子的陰影

回答

相關問題