CSS3與濾境(3)-陰影特效

屬性名稱

[Box Shadow]1、[Text Shadow]2Dropshadow(陰影,IE濾境)、Shadow(漸層陰影,IE濾境)

Box Shadow

說明:對一個物件(如圖片、DIV標籤)設定陰影。

屬性值:(水平位置) (垂直位置) (模糊距離) (影子大小) (陰影顏色) (插入)

  • 水平位置:必要屬性。指陰影水平位移的距離(長度單位),正的值往右移,負的值往左移。
  • 垂直位置:必要屬性。指陰影垂直位移的距離(長度單位),正的值往下移,負的值往上移。
  • 模糊距離:選擇屬性。指定模糊的程度(長度單位)。
  • 影子大小:選擇屬性。指定陰影的大小(長度單位)。預設值為0,表示和物件一樣大,正的值陰影放大,負的值陰影縮小。
  • 陰影顏色:選擇屬性。指定陰影的顏色。
  • 插入:選擇屬性。

【範例】

.box {
    box-shadow: 5px 5px 5px #888888;        /* 不支援IE8以前瀏覽器 */
    -webkit-box-shadow: 5px 5px 5px #888888;    /* Chrome、Safari 使用的語法 */
}

【結果】

Text Shadow

說明:設定文字陰影。

屬性值:(水平位置) (垂直位置) (模糊距離) (陰影顏色)

  • 水平位置:必要屬性。指陰影水平位移的距離(長度單位),正的值往右移,負的值往左移。
  • 垂直位置:必要屬性。指陰影垂直位移的距離(長度單位),正的值往下移,負的值往上移。
  • 模糊距離:選擇屬性。指定模糊的程度(長度單位)。
  • 陰影顏色:選擇屬性。指定陰影的顏色。

【範例】

.box {
    text-shadow: 5px 5px 5px #FF0000;       /* 不支援IE瀏覽器 */
}

【結果】

Text Shadow

Dropshadow

說明:IE濾境,設定一般陰影。範例結果請參考這裡

屬性值:color=顏色, offx=水平位移(0~無限), offy=垂直位移(0~無限), positive=0透明、1不透明

【範例】

.td {
    filter: dropshadow(color=gray, offx=3, offy=3, positive=1); /* IE濾境-支援IE8以前瀏覽器 */
}

Shadow

說明:IE濾境,設定漸層陰影。範例結果請參考這裡

屬性值:color=顏色, direction=陰影方向(0~360,預設270), strength=擴散距離(0~無限,預設8)

【範例】

.td {
    filter: shadow(color=black, direction=135); /* IE濾境-支援IE8以前瀏覽器 */
}

[1]: #Box Shadow [2]: #Text Shadow