2009/03/09

text-shadow 第一頁

text-align | text-decoration | text-indent | text-overflow | text-shadow | text-transform
text-shadow 1

設定文字的陰影效果,看起來像立體字。此特徵在 CSS2 有定義,因為不佳所以在 CSS2.1 被拿掉;CSS3 加以改善,重新定義。瀏覽器對此特徵的支援並不完整,Firefox3.5 才有此項。可設為:

  1. none:沒有陰影,此為預設值。
  2. 陰影:可設陰影的 顏色,沒有設定時使用 color 特徵的值。可設定兩個 長度。第一個長度是水平位移,向右為正值。第二個長度是垂直位移,向下為正值。可以選擇性的加上第三個長度作為模糊半徑。可以設定多組陰影,用”,”分開,依先後秩序重疊。Safari 只能有一層陰影。
  3. inherit:繼承父元素的特徵值。

加上陰影不會改變元素的矩形格子(box)之大小。

  • 此功能只在 Safari 成功展現;IE, Firefox3.0, Chrome 都沒有支援。

DropShadow()。IE 沒有 text-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;可以不分大小寫。

  • 上例,Firefox3.0, Chrome 失敗;IE6, Safari 都成功。text-shadow 與 DropShadow() 有蠻多差異的,使用時請多測試。
text-shadow(你正在看 第一頁) : 第一頁 第二頁