替 CSS span 區域增加陰影效果

替 CSS span 區域增加陰影效果需要使用 CSS3 的 box-shadow 屬性，這是 CSS3 新增的功能，也是標準的＂盒子＂陰影效果屬性，設計師可以很輕鬆的運用 box-shadow 屬性的各項參數，例如陰影的偏位方向、擴散範圍以及顏色，來替 span 區域設計出各式各樣不同風格的陰影效果，現在 box-shadow 屬性已經受到幾乎所有主流的瀏覽器所支持，詳細的語法規則也相當容易。

CSS3 的 box-shadow 屬性語法規則

box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;

你可以看到 box-shadow 有 6 個參數可以設定，每個參數的功能都是設定一項陰影的效果，非常重要，我們在《CSS3 box-shadow》篇中有詳細的使用介紹，請自行參閱。

替 CSS span 區域增加陰影效果應用範例

這是灰色的陰影效果
這是紅色的陰影效果
這是藍色的陰影效果

範例的實際效果

這是灰色的陰影效果這是紅色的陰影效果這是藍色的陰影效果

在本範例中，我們總共準備了三個不同的 span 區域，分別替它們加入不同的陰影效果，主要差異在於顏色的不同，其它的參數設定都一樣，如果要有更多陰影變化，就修改其它的參數即可，你可以從範例的實際效果看到灰色、紅色以及藍色的 span 陰影效果非常明顯，此即為非常基本的 CSS3 box-shadow 屬性套用到 span 增加陰影效果的技巧。

更多 span 設計