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_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 區塊，分別利用 CSS3 的 box-shadow 屬性幫它們加入了黃色、綠色以及粉紅色的陰影效果，你可以在我們的《色碼表》上找到更多可以使用的顏色來套用，另外，透過 box-shadow 的各參數設定可以調整陰影效果要呈現的方向與範圍，請直接由《CSS3 box-shadow》了解參數使用方式，範例中其它屬性如 background-color 是用來設計區塊的背景顏色、display:inline-block 是用來讓三個區塊水平排列，width 與 hight 分別是設計區塊的寬度與高度，最後 margin 則是控制區塊的外距，也就是區塊彼此間的距離。
延伸閱讀