CSS3 包含多个新的文本特性。
在本章中,您将学到如下文本属性:
- 1. text-shadow
- 2. word-wrap
浏览器支持
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
注释:Internet Explorer 9 以及更早的版本,不支持 text-shadow 属性。
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浏览器对这个功能提供支持。
示例代码
为文字依次指定了桔色、黄色及绿色阴影,同时也为这些阴影指定了适当的位置。
- .wrap {
- text-shadow:10px 10px #f39800,
- 40px 35px #fff100,
- 70px 60px #c0ff00;
- color:navy;
- font-size:50px;
- font-weight:bold;
- }
3.自动换行
单词太长的话就可能无法超出某个区域:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:
This paragraph contains a very long word : this is a very very very very very very long word. The long word will break and wrap to the next line.
CSS实例代码:
允许对长单词进行拆分,并换行到下一行:
- p {word-wrap:break-word;}