1、文本阴影text-shadow

语法 text-shadow:X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff

2、word-wrap（文字边界换行）:normal|break-word（强制换行）;

word-break:break-all（强制换行，不区分单词）| keep-all（区分单词，把单词展示完全）| normal

3、white-space （对空白操作，也可用于换行）

white-space:pre （保留所有空格，包括换行）| nowrap（不换行，文字将展示在一行内，并且不识别换行符和多个空格）| pre-line（保留换行符，合并空格，换行由单词长度决定，单词展现完全）//此属性不支持IE7.0-/Firefox3.0-和Opera9.2-以下版本浏览器| pre-wrap 保留换行符和空格，正常换行 //此属性不支持IE7.0和Firefox3.0以下版本浏览器

white-space的应用：超出部分打点

    <style>

           p{

               width:150px;

               height:200px;

               border:1px solid #000;

               overflow:hidden;

               white-space:nowrap;

               text-overflow:ellipsis;

           }

    </style>

</head>

    <body>

         <p>ndkfokdjfgjfldmg;dfmg;dkg;kdjfjfjjffjj</p>

    </body>

4、自定义字体    font-face

@font-face{ font-family:”myFirstFont”;

src:url('Sansation_Light.ttf'),

url(‘Sansation_Light.eot') format(‘eot’)；

}

p{

font-family:”myFristFont”;

}

地址：http://www.w3cplus.com/content/css3-font-face

format: 此值指的是你自定义的字体的格式，主要用来帮助浏览器识别浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，浏览器自身也无法通过路径后缀来判断字体

5、文本溢出属性text-overflow

text-overflow:clip | ellipsis;    文本溢出切断 |  省略号

超出打点功能：

               overflow:hidden;

               white-space:nowrap;

               text-overflow:ellipsis;

6、columns多列布局

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。

语法： columns: [column-width] [column-count];

column-width:指每一列的宽度 根据容器宽度自适应 （最小宽度）

column-count:指规定的列数 唯一精准的是列数

不要两一起使用 会乱

css3文本和颜色的更多相关文章

  1. 第 21 章 CSS3 文本效果

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

  2. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

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

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

  4. [HTML] CSS3 文本效果

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

  5. css3 文本效果

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

  6. css3 文本记

    css3 文本 在css文本功能上主要分为三大类:字体,颜色和文本. text-shadow 设置文本阴影 text-shadow:color x-offset y-offset blur-radiu ...

  7. 第七十八节，CSS3文本效果

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

  8. CSS3 文本效果(阴影)

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

  9. 4.css3文本属性

    1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...

随机推荐

  1. Linux性能优化 第八章 实用工具：性能工具助手

    8.1性能工具助手 Linux有丰富的工具,这些工具组合来使用会更加强大.性能工具也一样,单独使用虽然也没有问题,但是和其他的工具组合起来就能显著提高有效性和易用性. 8.1.1 自动执行和记录命令 ...

  2. python 之 XML的基本应用总结

    1.XML 的特征:xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.从结构上,很像HTML超文本标记语言.但他们被设计的目的是不同的,超文本标 ...

  3. BZOJ2054 疯狂的馒头 并查集

    题意:懒得写了有空再补上 链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2054 离线从后往前做,并查集维护下一个没染色的就可以啦- #incl ...

  4. 压缩（zip）

    默认情况这些压缩工具在压缩后会删除源文件(zip除外):而且默认只压缩文件,而不压缩目录(链接到打包程序). gzip bzip2 zip GNU tar 1.gzip 1.1.压缩 gzip 压缩工 ...

  5. gentoo openrc 开机打印信息

    gentoo openrc 开机的时候,最开始 一些硬件的信息, 后面是一些内核和驱动的信息. 硬件的信息是默认保存到 /var/log/dmesg 中, 可以使用 dmesg | less 来查看硬 ...

  6. Ruby学习笔记5: 动态web app的建立 （2）

    上一节里,我们搭建了一个数据库的结构,并用index验证了request-response cycle,如下图: 1. Add show method into Controller 这一节,我们要继 ...

  7. uva-317-找规律

    无耻的抄袭了结果,三组数,从每一组数中选取一个数组成正六边形的对边,总共会有27个正六边形,从27个小六边形中选取19个组成大六边形,求大六边形的最大值 #include<iostream> ...

  8. SAP HANA HDBSQL命令

    1.登录: window操作系统下面: 打开C:\Program Files\SAP\hdbclient\hdbsql.exe \c 连接数据库  connect的缩写 HANA hostname:  ...

  9. python库：bs4，BeautifulSoup库、Requests库

    Beautiful Soup https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ Beautiful Soup 4.2.0 文档 htt ...

  10. 如何解决Android帧动画出现的内存溢出

    这几天在做动画的时候,遇到了一个OOM的问题,特此记录下来. 普通实现 实现一个帧动画,最先想到的就是用animation-list将全部图片按顺序放入,并设置时间间隔和播放模式.然后将该drawab ...