CSS 現在支援邊框的陰影設計,如下圖:
要建立陰影效果,必須設定 box-shadow 樣式屬性,語法如下:
其中的數個參數列舉如下:
每一個參數的設定均會對陰影造成不同的效果,來看最簡單的設定:
這是一個固定長寬的 <div> 標籤,其中的 box-shadow 只設定了最簡單的參數,陰影會往右偏移 40px ,往下偏移 20 px 。
接下來修改box-shadow 屬性如下:
其中指定 blur 參數為 10px ,如此一來陰影會有 10px 的模糊效果:
現在加上 spread 屬性 20px ,修改如下:
重新檢視會發現陰影發生擴散現象:
在預設的情形下,陰影以黑色呈現,只要指定要表現的顏色值即可改變陰影的顏色,修改如下:
陰影效果還可以指定 inset 參數,令其以內嵌的形態呈現,設定如下:
最後一個參數 inset 導致呈現的結果如下:
好了,現在你可以根據自己的需求,設計自己的陰影樣式。
要建立陰影效果,必須設定 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 導致呈現的結果如下:
好了,現在你可以根據自己的需求,設計自己的陰影樣式。
沒有留言:
張貼留言