CSS3 的陰影邊框效果

CSS 現在支援邊框的陰影設計，如下圖：

要建立陰影效果，必須設定 box-shadow 樣式屬性，語法如下：

box-shadow: h v blur spread color inset;

其中的數個參數列舉如下：

參數	說明
h	表示陰影與框線的水平偏移距離長度，如果是正值則往右偏移，負值則往左偏移。
v	表示陰影與框線的垂直偏移距離長度，如果是正值則往下偏移，負值則往上偏移。
blur	可省略，表示陰影的糢糊半徑長度，不接受小於 0 的值，值愈大陰影愈糢糊，如果設定為 0 則陰影完全沒有糢糊的效果。
spread	可省略，表示陰影擴散距離長度，如果是正值陰影會往外擴散，負值則往內收斂。
color	表示陰影的顏色。
inset	關鍵字 inset 將預設的外部陰切換成為內部陰影。

每一個參數的設定均會對陰影造成不同的效果，來看最簡單的設定：

<div style="width:600px;height:160px;border:1px  solid black ;

box-shadow:40px 20px ; ">    </div>

這是一個固定長寬的  <div>  標籤，其中的 box-shadow 只設定了最簡單的參數，陰影會往右偏移 40px ，往下偏移 20 px 。

接下來修改box-shadow 屬性如下：

<div style="width:600px;height:160px;border:1px  solid black ;

box-shadow:40px 20px 10px; ">    </div>

其中指定 blur 參數為 10px ，如此一來陰影會有 10px 的模糊效果：

現在加上 spread 屬性 20px ，修改如下：

<div style="width:600px;height:160px;border:1px  solid black ;

box-shadow:40px 20px 10px 20px ; "> </div>

重新檢視會發現陰影發生擴散現象：

在預設的情形下，陰影以黑色呈現，只要指定要表現的顏色值即可改變陰影的顏色，修改如下：

陰影效果還可以指定 inset 參數，令其以內嵌的形態呈現，設定如下：

<div style="width:600px;height:160px;border:1px  solid black ;

box-shadow:40px 20px 10px 20px blue inset ; ">    </div>

最後一個參數 inset 導致呈現的結果如下：

好了，現在你可以根據自己的需求，設計自己的陰影樣式。

繼續閱讀…