2009/03/06

box-shadow 第一頁

box-shadow | box-sizing
box-shadow

此特徵可用來作元素矩形格子的投影效果。這是 CSS3 建議的特徵,發展還不成熟。Safari, Chrome 用 -webkit-box-shadow;Firefox3.5 用 -moz-box-shadow。最新的 瀏覽器 已經加入 box-shadow。考慮到 閱讀者的 瀏覽器 可能是舊版,所以 你必須 三個都設,如範例所示。可設的值有:

  1. 投影參數:兩個 長度 表示 x, y 的偏移量,這兩個數字必須有。可加上第三個長度,表示模糊半徑(blur radius),預設為 0px。可再加第四個長度,表示散播半徑(spread radius),預設為 0px。可加上顏色,未設時使用 color 特徵的值。還可以加上 inset,將投影放在矩格內,預設是矩格外。 可以作多層投影,放多組投影參數,然後用”,”分開。

    實測發現,Safari 可接受只設兩個長度;Chrome 則必須有三個長度。Safari, Chrome 都不接受第四個長度;多層投影沒有測試成功;也沒法使用 inset。

  2. none:不作投影,此為預設值。
  3. inherit:繼承父元素特徵。

DropShadow()。IE 沒有 box-shadow 特徵,但是可用 filter:DropShadow() 達成類似的功能(其實差很多)。其用法是:

filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=長度, OffY=長度, Color='顏色', Positive='布林值');

OffX 是投影的水平位移,向右為正值,單位為 px,預設值為 5。OffY 是投影的垂直位移,向下為正值,單位為 px,預設值為 5。Color 為投影的顏色。如果像素是透明色,Positive 必須設為 0(false)才會有投影;Positive 設為 1(true, 此為預設值),則只有非透明色有投影。元素必須設為 hasLayout 才能使用 filter,一般使用 zoom:1,這樣不會影響其它瀏覽器。

元素物件.filters.item('DXImageTransform.Microsoft.dropshadow').特徵。左項可用來讀取或設定特徵值。DropShadow 的特徵有 OffX, OffY, Color, Positive, enabled;可以不分大小寫。

  • 上例中,第一例的背景色是預設值 transparent;第二例設為 background:black。在 IE6 中,上兩例的結果不同。Firefox 3.0 無此項;Safari, Chrome 都成功。box-shadow 與 DropShadow() 有蠻多差異的,使用時請多測試。
box-shadow(你正在看 第一頁) : 第一頁 第二頁