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. MySQL高可用架构之基于MHA的搭建

    一.MySQL MHA架构介绍: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Fa ...

  2. python学习之----BuildSoup和正则表达式

    在抓取网页的时候,BeautifulSoup 和正则表达式总是配合使用的.其实,大多数支 持字符串参数的函数(比如,find(id="aTagIdHere"))都可以用正则表达式实 ...

  3. 带约束的粒子群优化算法C++实现

    2018年1月份给师姐做的一个小项目,本来不打算写的,因为论文还没发表,涉及查重等乱七八糟的问题.... 感觉现在不写,以后应该来不及了,因为已经在实习岗位了.... 不做过多介绍,只做大概的描述,我 ...

  4. 安装hyperledger fabric V1.0.1

      安装文档位置: https://github.com/hyperledger/fabric   fabric代码托管地址 https://hyperledger-fabric.readthedoc ...

  5. 《算法》第三章部分程序 part 5

    ▶ 书中第三章部分程序,加上自己补充的代码,包含公共符号表.集合类型 ● 公共符号表,用于普通查找表的基本类 package package01; import java.util.NoSuchEle ...

  6. Android中糟糕的AsyncTask

    上周做一个Android中的帧动画,因为每帧图片都比较大,所以采用每次读取一帧,延时再读取下一帧的方式实现.在读取的时候,采用AsyncTask,去设置ImageView的背景.但是发现需要切换帧动画 ...

  7. (转载)Android下Affinities和Task

    源文链接:http://appmem.com/archives/405 1.Activity和Task task就好像是能包含很多activity的栈. 默认情况下,一个activity启动另外一个a ...

  8. DJango之视图函数

    一)Django WEB框架 2) request.path和request.get_full_path() 是请求的路径 3)render:页面渲染 4)redirect:页面跳转 3)模板语法: ...

  9. Python 基础补充(一) 列表、元组、集合、字典的区别和相互转换

    一.列表.元组.集合.字典的区别   列表 元组 集合 字典 英文 list tuple set dict 可否读写 读写 只读 读写 读写 可否重复 是 是 否 是 存储方式 值 值 键(不能重复) ...

  10. text-align: justify;浏览器、安卓手机不兼容问题

    https://segmentfault.com/a/1190000013146385