text-shadow是給文字新增陰影效果，box-shadow是給元素塊新增周邊陰影效果。隨著html5和css3的普及，這一特殊效果使用越來越普遍。
基本語法是
物件選擇器
box-shadow屬性的引數設定取值：
陰影型別：此引數可選。如不設值，預設投影方式是外陰影；如取其唯一值「inset」，其投影為內陰影；
x-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在物件的右邊，其值為負值時，陰影在物件的左邊；
y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在物件的底部，其值為負值時，陰影在物件的頂部；
陰影模糊半徑：此引數可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴充套件半徑：此引數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
陰影顏色：此引數可選。如不設定顏色，瀏覽器會取預設色，但各瀏覽器預設取色不一致，特別是在webkit核心下的safari和chrome瀏覽器下表現為透明色，在firefox/opera下表現為黑色（已驗證），建議不要省略此引數。
瀏覽器的相容：
為了相容各主流瀏覽器並支援這些主流瀏覽器的較低版本，在基於webkit的chrome和safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。firefox瀏覽器則需要寫成-moz-box-shadow的形式。
.box-shadow注意：出於方便，後文的css屬性有的地方只寫了box-shadow屬性，沒有寫-moz-和-webkit-字首的形式，在使用中不要忘記加上。
為了更清楚的了解box-shadow的特徵，做幾個小測試，看效果：
結論：1） 從.box-shadow-1的效果可以得出不指定屬性陰影顏色的情況下，陰影在webkit核心下的safari和chrome瀏覽器下表現為透明色，在firefox/opera下表現為黑色。
2） 從內外兩個div塊inner、outer的對比來看，所有支援box-shadow的主流瀏覽器都表現為：內層陰影撐破外層容器將整個陰影效果呈現出來。w3c標準用圖示的方式對box-shadow的原理和表現進行了解讀：
從圖中我們可以了解到：圓角border-radius，陰影擴充套件半徑、陰影模糊半徑以及padding是如何影響物件陰影的：非零值的border-radius將會以相同的作用影響陰影的外形，但border-image不會影響物件陰影的任何外形；物件陰影同box模型的層次一樣，外陰影會在物件背景之下，內陰影會在邊框之下背景之上。我們知道，預設情形背景是在背景顏色之上的。所以整個層級是：邊框》內陰影》背景》背景顏色》外陰影。
3） 從. box-shadow-2到. box-shadow-5的效果，我們可以了解到box-shadow取值的作用。
. box-shadow-2是xy沒有偏移，陰影大小10px，沒有擴充套件半徑，顏色#0cc即rgba(0, 204,204, 1)，這裡我們使用的是顏色hex值；效果
而. box-shadow-3是在. box-shadow-2效果的基礎上，應用了rgba顏色值，好處是給box-shadow陰影新增了alpha透明效果。效果：
. box-shadow-4在. box-shadow-2效果的基礎上新增了陰影擴充套件半徑15px。
. box-shadow-5在. box-shadow-2效果的基礎上，將外陰影設為內陰影。
4）. box-shadow-6乙個元素使用了多個陰影，多個陰影之間用逗號分隔。給物件四邊設定陰影效果，我們是通過改變x-offset和y-offset的正負值來實現，其中x-offset為負值時，生成左邊陰影，為正值時生成右邊陰影，y-offset為正值是生成底部陰影，為負值時生成頂部陰影。並且把模糊半徑設定為0，如果不設定為0的話那麼其他三邊也將會有陰影。這點需要注意！
注意這樣的寫法是錯誤的：並且此處還涉及到乙個多陰影的順序問題。當給同乙個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層，如. box-shadow-7設為不同的模糊值：
.box-shadow-7
在六一兒童節的專題中，我是這麼處理的：
li.blk-item方法二：有些js和.htc的hack檔案可以實現ie中的陰影效果。ie-css3.htc
是乙個可以讓ie瀏覽器支援部份css3屬性的htc檔案，不只是box-shadow，它還可以讓你的ie瀏覽器支援圓角屬性border-radius和文字陰影屬性text-shadow。
在你的裡面寫入下面的**:
這個指令碼的缺點是ie只支援一部分的box-shadow值。需要注意：
方法三：使用jquery的外掛程式jquery.boxshadow.js
使用方法很簡單，將該檔案和jquery版本庫引入head標籤，插入以下js效果**：
補充知識：css3的屬性
border-top-left-radius：[| ] [ | ]?
預設值：0
取值：：
用長度值設定物件的左上角(top-left)圓角半徑長度。不允許負值
：用百分比設定物件的左上角(top-left)圓角半徑長度。不允許負值
說明：設定或檢索物件的左上角圓角邊框。提供2個引數，2個引數以空格分隔，每個引數允許設定1個引數值，第1個引數表示水平半徑，第2個引數表示垂直半徑，如第2個引數省略，則預設等於第1個引數。 如設定border-top-left-radius:5px10px;表示top-left這個角的水平圓角半徑為5px，垂直圓角半徑為10px。對應的指令碼特性為bordertopleftradius。
css3陰影演示工具
css3 邊框陰影 box shadow
box shadow是向盒子新增陰影。支援新增乙個或者多個。很簡單的一段 就實現了投影效果，酷斃了。我們來看下語法 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 引數介紹 注意 inset 可以寫在引數的第乙個或最後乙個，其它位置是無效的。為元素設...
CSS3 邊框陰影box shadow
box shadow是css3中的乙個屬性，它可以向框新增乙個或多個陰影。box shadow h shadow v shadow blur spread color inset 其中box shadow的屬性 h shadow 水平陰影的位置。v shadow 垂直陰影的位置。blur 模糊距離 ...
CSS3盒子陰影box shadow
來自w3cschool的解釋 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影...