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 導致呈現的結果如下:


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


沒有留言: