css3学习总结5--CSS3文本效果

CSS3 文本效果

• 1. text-shadow
• 2. word-wrap

text-shadow属性使用方法

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

text-shadow:length length length color

　　其中，前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。

下面是一个text-shadow属性的使用示例。在该示例中给一段红色文字绘制灰色阴影。其中阴影离开文字的横方向距离和纵方向距离均为5个像素。

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

位移距离

text-shadow属性所使用的参数中，前两个参数为阴影离开文字的横方向位移距离与纵方向位移距离。

使用text-shadow属性时必须要指定这两个参数，可以对这两个参数指定负数值。

示例：

.className
{
　　text-shadow:-15px 10px 5px gray;
　　color:navy;
　　font-size:50px;
　　font-weight:bold;
}

　　

指定多个阴影

可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。

指定多个阴影时使用逗号将多个阴影进行分隔。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器对这个功能提供支持。

示例代码

为文字依次指定了桔色、黄色及绿色阴影，同时也为这些阴影指定了适当的位置。

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

　　

自动换行

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

p {word-wrap:break-word;}