CSS3:CSS3 文本效果

CSS3 文本效果

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

在本章中,您将学到如下文本属性:

  1. text-shadow
  2. word-wrap

浏览器支持

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

所有主流浏览器都支持 word-wrap 属性。

注释:Internet Explorer 9 以及更早的版本,不支持 text-shadow 属性。

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;
}

位移距离

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

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

示例:

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

阴影的模糊半径

text-shadow 属性所使用的参数中第三个参数是阴影的模糊半径,代表阴影向外模糊时的模糊范围。这个半径的值越大,则阴影向外模糊的范围也就越大。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

将阴影的模糊半径从5个像素修改为20像素,示例代码:

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

注意:模糊半径参数为可选参数,省略这个参数时,该参数默认为0,代表阴影不向外模糊。

阴影的颜色

text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色,该参数可以放在其他三个参数之后,也可放其他三个参数之前,成为第一个参数。该参数为可选参数,如果不指定,则使用浏览器指定的默认颜色。

示例代码:
.wrap {
   text-shadow:5px 5px 20px;
   color:navy;
   font-size:50px;
   font-weight:bold;
}

指定多个阴影

可以使用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;
}

自动换行

单词太长的话就可能无法超出某个区域:

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

CSS实例代码:

允许对长单词进行拆分,并换行到下一行:

p {word-wrap:break-word;}
全部评论(0)