用 CSS3 box-shadow 設計 DIV 區塊陰影效果

CSS3 的 box-shadow 屬性本來的功能就是用來設計區塊的陰影效果,網頁中的許多元素都可以使用區塊的方式來呈現,例如圖片區塊、表單區塊、表格區塊以及我們今天要介紹的 DIV 區塊,這些區塊都可以使用 CSS3box-shadow 屬性來增加陰影效果,優點是只需要幾行的 CSS 語法,馬上就可以讓區塊呈現出漂亮的陰影效果,比起傳統用繪圖軟體來設計更加簡便,後續維護修改都非常便利,我們先來看看 CSS3box-shadow 屬性語法要如何寫,再套用到範例中看呈現的結果。

CSS3 box-shadow 屬性基本語法
box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;
我們在《CSS3 box-shadow》篇有詳細的各參數用法,請自行參閱。

用 CSS3 box-shadow 設計 DIV 區塊陰影效果應用範例
<style type="text/css">
<!--
#DIV_A{
    display:inline-block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:3px 3px 9px yellow;
}
#DIV_B {
    display:inline-block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:0px 0px 9px green;
}
#DIV_C{
    display:inline-block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:-3px -3px 9px pink;
}
-->
</style>
<div id="DIV_A"></div>
<div id="DIV_B"></div>
<div id="DIV_C"></div>
範例的呈現效果
我們在範例中總共準備了三組不同的 DIV 區塊,分別利用 CSS3box-shadow 屬性幫它們加入了黃色、綠色以及粉紅色的陰影效果,你可以在我們的《色碼表》上找到更多可以使用的顏色來套用,另外,透過 box-shadow 的各參數設定可以調整陰影效果要呈現的方向與範圍,請直接由《CSS3 box-shadow》了解參數使用方式,範例中其它屬性如 background-color 是用來設計區塊的背景顏色、display:inline-block 是用來讓三個區塊水平排列,width 與 hight 分別是設計區塊的寬度與高度,最後 margin 則是控制區塊的外距,也就是區塊彼此間的距離。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C