替 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 style="box-shadow:1px 1px 3px gray;margin-right:8px;">這是灰色的陰影效果</span>
<span style="box-shadow:1px 1px 3px red;margin-right:8px;">這是紅色的陰影效果</span>
<span style="box-shadow:1px 1px 3px blue;">這是藍色的陰影效果</span>
範例的實際效果
這是灰色的陰影效果 這是紅色的陰影效果 這是藍色的陰影效果
在本範例中,我們總共準備了三個不同的 span 區域,分別替它們加入不同的陰影效果,主要差異在於顏色的不同,其它的參數設定都一樣,如果要有更多陰影變化,就修改其它的參數即可,你可以從範例的實際效果看到灰色、紅色以及藍色的 span 陰影效果非常明顯,此即為非常基本的 CSS3 box-shadow 屬性套用到 span 增加陰影效果的技巧。

更多 span 設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012