HTML文本陰影的方法

下面我們給大家介紹一下HTML文本陰影的方法吧!希望大家可以在這裡學習!

解決方案

Safari浏覽器支持CSS 屬性text-shadow.IE 6提供其專有的屬性filter: shadow,它會使你的CSS失效。你可以使用這兩種屬性在這些浏覽器裡創建陰影。其他浏覽器不支持文本陰影。

在Safari浏覽器中，使用text-shadow為文本添加陰影。

n    COLOR是陰影的顏色。

n    X-OFFSET是陰影的水平方向偏移。

n    Y-OFFSET是陰影的垂直方向偏移。

n    DIFFUSION是污點的量。值越高則污點量越大。

在IE 6中，使用filter:shadow為文本添加陰影。

n    COLOR是陰影的顏色。

n    DIRECTION是陰影的方向：0 = 上方，45 = 右上方，90 = 右方，135 = 右下方，180 = 下方，225 = 左下方，270 = 左方，315 = 左上方。

n    SIZE是顯示器像素中的陰影尺寸。

n    使用zoom:1在IE內引發陰影效應。在IE 6將過濾器效果用於自身之前，它需要一個塊進行布局。zoom:1觸發布局。布局是IE的特有屬性。

布局在第7章的原子化設計模式中有討論。

模式

SELECTOR { text-shadow:COLOR X-OFFSET Y-OFFSET DIFFUSION;

filter:shadow(color=COLOR,

direction=DIRECTION,

strength=SIZE);

zoom:1; }

適用范圍

此模式適用於塊狀元素。確切地說，text-shadow適用於所有元素，filter:shadow僅適用於塊狀元素。

局限

此模式不能在Firefox 2或Opera 9中使用。text-shadow在Safari 1.2.4中工作，filter:shadow在IE 6中工作。

我引入這個設計模式是因為當浏覽器不支持時也不會破壞文本陰影的使用。陰影效應是非本質的。

當color和background-color一樣時，應避免使用陰影創造特殊效果(例如遮擋)，因為它會使浏覽器中的可視文本不支持陰影。

如果你為陰影塊元素賦予邊界，IE 6將會在其中的邊界和文本處添加陰影。

提示

文本周圍的陰影效果使文本加粗並從它的背景中突顯出來。陰影對標題和背景圖像上的文本最適合。稍加陰影會提高易讀性，而濃厚的陰影會使文本更難讀。

以上就是我們給大家介紹的HTML文本陰影的方法了。希望大家繼續關注我們的網站!