CSS3的出現為網頁設計帶來了極大的革新，不僅提供了更多的排版方式和樣式，還增加了很多新特性，比如今天要介紹的——陰影。

在CSS2中，制作陰影效果需要用到圖片來實現，這不僅增加了網頁的加載時間，而且在不同瀏覽器上的呈現效果也會有所不同。但是CSS3的陰影特性完全改變了這種情況，使得制作陰影效果變得更加簡單。

/* 陰影屬性的語法 */
box-shadow: h-shadow v-shadow blur spread color inset;

這里box-shadow是用來設置陰影效果的屬性，其后面的參數分別為：

• h-shadow：陰影水平偏移距離，可以為正負值。
• v-shadow：陰影垂直偏移距離，可以為正負值。
• blur：陰影模糊半徑，值越大陰影就越模糊，可以為0。
• spread：陰影擴散半徑，正值時陰影擴大，負值時陰影縮小，可以為0。
• color：陰影顏色，可以為CSS顏色值或者rgba值。
• inset：可選值，可以使陰影變成內陰影。

/* 設置一個黑色的外陰影 */
box-shadow: 10px 10px 5px #000;

上面的代碼表示生成一個水平偏移10像素，垂直偏移10像素，模糊半徑為5像素，顏色為黑色的外陰影。

/* 設置一個紅色的內陰影 */
box-shadow: inset 10px 10px 5px #f00;

上面的代碼表示生成一個水平偏移10像素，垂直偏移10像素，模糊半徑為5像素，顏色為紅色的內陰影。

除了box-shadow屬性外，CSS3還提供了text-shadow屬性用來給文本添加陰影效果，其語法與box-shadow類似。

/* 給文本添加一個黑色的陰影 */
text-shadow: 2px 2px #000;

使用CSS3的陰影效果，不僅可以減少網頁的加載時間，而且也可以使網頁的樣式更加美觀。一段簡單的CSS代碼就可以實現豐富多彩的陰影效果，如此方便實用，真是一件值得使用的好東西。