mg不朽情缘老外直播

書名： CSS3+DIV網頁樣式與布局案例課堂（第2版）
作者名：劉春茂
本章字數： 1283字
更新時間： 2020-06-29 18:06:47

4.2 CSS3中新增的文本高級樣式

對于一些特殊要求的文本，例如文字存在陰影、字體種類發生變化，如果再使用上面所介紹的CSS樣式進行定義，其結果就不會正確顯示，這時就需要一些特定的CSS標記來實現這些要求。

4.2.1 案例8——添加文本的陰影效果

在顯示字體時，有時根據需求，需要給出文字的陰影效果，以增強網頁整體的吸引力，并且為文字陰影添加顏色。這時就需要用到CSS3樣式中的text-shadow屬性。實際上，在CSS2.1中，W3C就已經定義了text-shadow屬性，但在CSS3中又重新定義了它，并增加了不透明度效果。其語法格式如下所示。

{text-shadow ： none | <length> none | [<shadow>, ] * <opacity> 或none |
<color> [, <color> ]* }

其屬性值如表4-6所示。

表4-6 text-shadow屬性值

text-shadow屬性有四個屬性值，最后兩個是可選的，第一個屬性值表示陰影的水平位移，可取正負值；第二個值表示陰影垂直位移，可取正負值；第三個值表示陰影模糊半徑，該值可選；第四個值表示陰影顏色值，該值可選。如下所示。

text-shadow:陰影水平偏移值(可取正負值); 陰影垂直偏移值(可取正負值); 陰影模糊值; 陰影顏色

【例4.8】（案例文件：ch04\4.8.html）

<!DOCTYPE html>
<html>
<body>
<p align=center style="text-shadow:0.1em 2px 6px blue;font-size:80px;">這是
TextShadow的陰影效果</p>
</body>
</html>

在IE 11.0瀏覽器中瀏覽效果如圖4-8所示，可以看到文字居中并帶有陰影效果。

圖4-8 陰影顯示結果

通過上面的案例，可以看出陰影偏移由兩個length值指定到文本的距離。第一個長度值指定到文本右邊的水平距離，負值會把陰影放置在文本左邊。第二個長度值指定到文本下邊的垂直距離，負值會把陰影放置在文本上方。在陰影偏移之后，可以指定一個模糊半徑。

4.2.2 案例9——設置文本溢出效果

text-overflow屬性用來定義當文本溢出時是否顯示省略標記，即定義省略文本的處理方式，并不具備其他樣式屬性定義。要實現溢出時產生省略號的效果還需定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。

text-overflow語法如下所示。