(摘自博客學(xué)習(xí)筆記，原網(wǎng)址：http://blog.csdn.net/freshlover/article/details/7610269)
text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS3的普及，這一特殊效果使用越來越普遍。
基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}
box-shadow屬性的參數(shù)設(shè)置取值：
陰影類型：此參數(shù)可選。如不設(shè)值，默認(rèn)投影方式是外陰影；如取其唯一值“inset”，其投影為內(nèi)陰影；
X-offset:陰影水平偏移量，其值可以是正負(fù)值。如果值為正值，則陰影在對象的右邊，其值為負(fù)值時，陰影在對象的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負(fù)值。如果為正值，陰影在對象的底部，其值為負(fù)值時，陰影在對象的頂部；
陰影模糊半徑：此參數(shù)可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個陰影都延展擴(kuò)大，反之值為負(fù)值時，則縮??；
陰影顏色：此參數(shù)可選。如不設(shè)定顏色，瀏覽器會取默認(rèn)色，但各瀏覽器默認(rèn)取色不一致，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色，在Firefox/Opera下表現(xiàn)為黑色（已驗證），建議不要省略此參數(shù)。
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。
也有boshadow的插件：：使用jQuery的插件jquery.boxshadow.js，插件的下載地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js
CSS3陰影演示工具http://www.css88.com/tool/css3Preview/Box-Shadow.html
1.默認(rèn)的顏色
.box-shadow-1{
-webkit-box-shadow:?3px?3px?3px;
-moz-box-shadow:?3px?3px?3px;
box-shadow:?3px?3px?3px;
}
2.對象陰影同box模型的層次一樣，外陰影會在對象背景之下，內(nèi)陰影會在邊框之下背景之上。我們知道，默認(rèn)情形背景圖片是在背景顏色之上的。所以整個層級是：邊框>內(nèi)陰影>背景圖片>背景顏色>外陰影。
.box-shadow-2{
-webkit-box-shadow:0?0?10px?#0CC;
-moz-box-shadow:0?0?10px?#0CC;
box-shadow:0?0?10px?#0CC;
}
3.給陰影添加透明度rgba
.box-shadow-3{
-webkit-box-shadow:0?0?10px?rgba(0,?204,?204,0 .5);
-moz-box-shadow:0?0?10px?rgba(0,?204,?204,0 .5);
box-shadow:0?0?10px?rgba(0,?204,?204, 0.5);
}
4.給陰影添加擴(kuò)展半徑15px
.box-shadow-4{
-webkit-box-shadow:0?0?10px?15px?#0CC;
-moz-box-shadow:0?0?10px?15px?#0CC;
box-shadow:0?0?10px?15px?#0CC;
}
5.內(nèi)陰影
.box-shadow-5{
-webkit-box-shadow:inset?0?0?10px?#0CC;
-moz-box-shadow:inset?0?0?10px?#0CC;
box-shadow:inset?0?0?10px?#0CC;
}
6.多個陰影，多個陰影之間用逗號分隔。給對象四邊設(shè)置陰影效果，我們是通過改變x-offset和y-offset的正負(fù)值來實(shí)現(xiàn)，其中x-offset為負(fù)值時，生成左邊陰影，為正值時生成右邊陰影，y-offset為正值是生成底部陰影，為負(fù)值時生成頂部陰影。并且把模糊半徑設(shè)置為0，如果不設(shè)置為0的話那么其他三邊也將會有陰影。
.box-shadow-6{
box-shadow:-10px?0?10px?red,?/*左邊陰影*/
10px?0?10px?yellow,?/*右邊陰影*/
0?-10px?10px?blue,?/*頂部陰影*/
0?10px?10px?green;?/*底邊陰影*/
}
7.此處還涉及到一個多陰影的順序問題。當(dāng)給同一個元素使用多個陰影屬性時，就是同事設(shè)置多層陰影，需要注意它的順序，最先寫的陰影將顯示在最頂層，最先寫的最接近border的位置，而且后面的模糊半徑要大于前面的，否則會被擋住，如. box-shadow-7設(shè)為不同的模糊值：
.box-shadow-7{
box-shadow:0?0?10px?5px?black,
0?0?10px?20px?red;
}
黑色的陰影模糊半徑太小，將會被擋住
.box-shadow-8{
box-shadow:0?0?10px?20px?red,
0?0?10px?5px?black;
}
9..box-shadow-9呈現(xiàn)的效果，同boder:1px solid red相似，但box-shadow的效果與border效果在對象高度上有區(qū)別，正好要比border高度大一個擴(kuò)展半徑。而且陰影不影響頁面的任何布局。
.box-shadow-9{
box-shadow:?0?0?0?1px?red;
}
