CSS3 文本效果

CSS3 包含多個新的文本特性。

在本章中，您將學(xué)到如下文本屬性：

• text-shadow
• word-wrap

瀏覽器支持

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。

所有主流瀏覽器都支持 word-wrap 屬性。

注釋：Internet Explorer 9 以及更早的版本，不支持 text-shadow 屬性。

CSS3 文本陰影

在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。

您能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：

實例

向標(biāo)題添加陰影：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

親自試一試

CSS3 自動換行

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

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

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

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

下面是 CSS 代碼：

實例

允許對長單詞進(jìn)行拆分，并換行到下一行：

p {word-wrap:break-word;}

親自試一試

新的文本屬性