CSS3教程-文字效果

CSS3提供了很多的設計上的新技術和進階功能，它給Web前端開發開發帶來了革命性的影響，以前很多需要JavaScript才能實現的複雜效果，現在使用CSS3就能簡單地實現。本文給大家介紹CSS3教程-文字效果，希望能協助提高你的CSS技巧。

CSS3 文字效果：

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

在本文中，您將學到如下兩種文字屬性：

1、text-shadow

text-shadow給文字加上陰影,利用css3屬性增加文字的質感而不用使用任何圖片。

文法：

text-shadow:h-shadowv-shadowblurcolor;

2、word-wrap

css的 word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字串太長而找不到它的自然斷句點時產生溢出現象。允許長單詞換行到下一行：

文法：

p.test {word-wrap:break-word;}

瀏覽器支援：

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

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

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

CSS3 文本陰影：

在 CSS3 中，text-shadow 可向文本應用陰影。

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

執行個體：

向標題添加陰影：

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

CSS3 自動換行：

單詞太長的話就可能無法超出某個地區：

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

下面是 CSS 代碼：

執行個體：

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

p {word-wrap:break-word;}

新的文字屬性：

以上就是CSS3教程-文字效果的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

