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. Solr DocValues详解

    前言: 在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来的 ...

  2. luoguP1368 工艺(最小表示法 后缀自动机)

    最小表示法就是直接扫过去 后缀自动机就是每次找最字典序最小儿子输出 最小表示法 /* 最小表示法裸题, 我好像学过来着?? 怎么忘得这么干净 */ #include<cstdio> #in ...

  3. webstorm命令行无法使用node-gyp进行编译

    换成cmd命令即可:

  4. spring boot使用配置文件内容

    配置文件如下所示: server: port: 8081 context-path: /demo tag: 12 user: name1: mist-dev password: 123 然后可以通过以 ...

  5. [Unity动画]06.子状态机

    参考链接: https://www.jianshu.com/p/6b1db3d060ac?utm_campaign=maleskine&utm_content=note&utm_med ...

  6. asp 月末 月初

    上个月第一天:<%=dateadd("m",-1,year(date)&"-"&month(date)&"-1" ...

  7. 2.HTML文件中<!DOCTYPE html>的作用

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏 览器文档使用哪种 HTML 或 XHTML 规范.(重点:告诉浏览器按照何种规 ...

  8. RDD、DataFrame、Dataset

    RDD是Spark建立之初的核心API.RDD是不可变分布式弹性数据集,在Spark集群中可跨节点分区,并提供分布式low-level API来操作RDD,包括transformation和actio ...

  9. <基础> PHP 字符串操作

    explode — 使用一个字符串分割另一个字符串 array explode ( string $delimiter , string $string [, int $limit ] ) implo ...

  10. 使用cuteFTP与虚拟机交互文件---安装ftp服务

    安装ftp服务,以便在Windows中使用cuteFTP与虚拟机交互文件,使用sudo apt-get install vsftpd 安装完后,打开/etc/vsftpd.conf文件,去掉local ...