1.text-shadow屬性使用方法

text-shadow屬性使用方法如下所示。

text-shadow:length length length color

其中，前面三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱方向距離和陰影的模糊半徑，color指陰影的顏色。

下面是一個text-shadow屬性的使用示例。在該示例中給一段紅色文字繪制灰色陰影。其中陰影離開文字的橫方向距離和縱方向距離均為5個像素。

.wrap{
text-shadow:5px 5px 5px gray;
color:red;font-size:50px;
font-weight:bold;
}

2.指定多個陰影

可以使用text-shadow屬性來給文字指定多個陰影，并且針對每個陰影使用不同顏色。

指定多個陰影時使用逗號將多個陰影進行分隔。到目前為止，只有Firefox瀏覽器、Chrome瀏覽器及Opera瀏覽器對這個功能提供支持。

示例代碼

為文字依次指定了桔色、黃色及綠色陰影，同時也為這些陰影指定了適當(dāng)?shù)奈恢谩?/p>

.wrap {
  text-shadow:10px 10px #f39800,40px 35px #fff100,70px 60px #c0ff00;
color:navy;
font-size:50px;
font-weight:bold;
}

自動換行

單詞太長的話就可能無法超出某個區(qū)域：

在 CSS3 中，word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味著會對單詞進行拆分：

允許對長單詞進行拆分，并換行到下一行：

p?{word-wrap:break-word;}

新文本屬性 ? ? ? ? ? ? ? ? ? ??

屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??CSS

hanging-punctuation ? ? ? ? ?規(guī)定標(biāo)點字符是否位于線框之外。 ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

punctuation-trim ? ? ? ? ? ? ? ? 規(guī)定是否對標(biāo)點字符進行修剪。 ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

text-align-last ? ? ? ? ? 設(shè)置如何對齊最后一行或緊挨著強制換行符之前的行。 ? ?3 ? ?

text-emphasis ? ?向元素的文本應(yīng)用重點標(biāo)記以及重點標(biāo)記的前景色。 ? ? ? ? ? ? ?3 ? ?

text-justify ? ?規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時所使用的對齊方法。 ? ? ? ? ? 3 ? ?

text-outline ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定文本的輪廓。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?

text-overflow ? ? ? ? ?規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。 ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?

text-shadow ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?向文本添加陰影。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

text-wrap ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?規(guī)定文本的換行規(guī)則。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?

word-break ? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定非中日韓文本的換行規(guī)則。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

word-wrap ? ?允許對長的不可分割的單詞進行分割并換行到下一行。 ? ? ? ? ? ? ? ? 3 ? ?