在CSS3中，我們可以使用box-shadow屬性輕松地為元素添加陰影效果。
語法：
box-shadow：x-shadow y-shadow blur spread color inset;
說明：
（1）x-shadow：設置水平陰影的位置（X軸），可以使用負值；
（2）y-shadow：設置垂直陰影的位置（y軸），可以使用負值；
（3）blur：設置陰影模糊半徑；
（4）spread：擴展半徑，設置陰影的尺寸；
（5）color：設置陰影的顏色；
（6）inset：這個參數默認不設置。默認情況下為外陰影，inset表示內陰影。
舉例：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> div { width:100px; height:100px; line-height:100px; text-align:center; margin-bottom:20px; } #div1{box-shadow:0 0 12px red;} #div2{box-shadow:0 0 12px red inset;} </style> </head> <body> <div id="div1">外陰影</div> <div id="div2">內陰影</div> </body> </html>
顯示效果：
這里注意一個技巧：當水平陰影位置x-shadow和垂直陰影位置y-shadow都為0時，陰影都向外發散或者都向內發散。