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

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

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

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

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

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

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

/* 設(shè)置一個紅色的內(nèi)陰影 */
box-shadow: inset 10px 10px 5px #f00;

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

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

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

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