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属性使用方法如下所示。

  1. text-shadow:length length length color

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

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

  1. .wrap
  2. {
  3. text-shadow:5px 5px 5px gray;
  4. color:red;
  5. font-size:50px;
  6. font-weight:bold;
  7. }

2.指定多个阴影

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

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

示例代码

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

  1. .wrap {
  2. text-shadow:10px 10px #f39800,
  3. 40px 35px #fff100,
  4. 70px 60px #c0ff00;
  5. color:navy;
  6. font-size:50px;
  7. font-weight:bold;
  8. }

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实例代码:

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

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

css3文本效果的更多相关文章

  1. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  2. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  3. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  4. 第七十八节,CSS3文本效果

    CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  5. CSS3:CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  6. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  7. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  8. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

随机推荐

  1. 怎样在 Swift 项目中使用 CocoaPods

    4个步骤,将 CocoaPods 导入 Swift 1.创建.编辑 Podfile 文件并 pod install 2.使用 File -> New -> File- 创建一个 Heade ...

  2. c保存lua函数

    使用下面方式可保存lua任何值,目前只实现fucntion的保存,且无参数.如果需要实现参数,可自己扩展: 可实现下面方式: CFun( lua_fun ) -- okCFun( function() ...

  3. MFC多线程内存泄漏问题&amp;解决方法

    在用visual studio进行界面编程时(如MFC),前台UI我们能够通过MFC的消息循环机制实现.而对于后台的数据处理.我们可能会用到多线程来处理. 那么对于大多数人(尤其是我这样的菜鸟),一个 ...

  4. 原生的UITableViewCell高度自适应,textLabel自动换行显示

    /* * 设置子项cell **/ - (UITableViewCell *)getChildCell:(UITableView *)tableView and:(NSIndexPath *)inde ...

  5. 如何让你的SQL运行得更快

    人们在使用SQL时往往会陷入一个误区,即太关注于所得的结果是否正确,而忽略了不同的实现方法之间可能存在的性能差异,这种性能差异在大型的或是复杂的数据库环境中(如联机事务处理OLTP或决策支持系统DSS ...

  6. operator 类型转换符

    参考脚本之家的这篇博客   http://www.jb51.net/article/41333.htm 类型转换操作符(type conversion operator)是一种特殊的类成员函数,它定义 ...

  7. JS 中刷新页面的方法

    整理了就是这几种,,有些在IE下面是不支持的,慎用... 1,history.go(0) 2,location.reload() 3,location=location 4,location.assi ...

  8. 使用mysqlbinlog工具进行基于位置或时间点的数据恢复

    使用mysqlbinlog工具进行基于位置或时间点的恢复 MySQL备份一般采取全备份加日志备份的方式,比如每天执行一次全备份,每小时执行一次二进制日志备份.这样在MySQL Server故障后可以使 ...

  9. seajs路径问题及源码分析

    seajs如此神奇,究竟是如何做到的呢,想知基原理,方可看其源码~~之前冲忙写下的,可能有点乱哦~~有什么不对的,欢迎拍砖!   如果进入seajs了管理范围,那么路径分为:   1.    /  或 ...

  10. [转]gcc -I -L -l区别

    我们用gcc编译程序时,可能会用到“-I”(大写i),“-L”(大写l),“-l”(小写l)等参数,下面做个记录: 例: gcc -o hello hello.c -I /home/hello/inc ...