CSS3新增的部分属性

·-moz- 是Firefox的前缀
·-webkit- 是Safari和Chrome的前缀
·-o- 是Opera的前缀
·-khtml- 是Konqueror的前缀
·-ms- 是Internet Explorer的前缀
·-chrome- 是Google Chrome的专用前缀

##1.文本与字体：

在CSS3中，在文本修饰方面，可以增加阴影、描边和发光等效果。在排版方法，可以对溢出及换行进行良好的控制，甚至对于特殊少见的字体，也能在客户端显示良好。

1）text-shadow属性：

CSS3中的阴影属性text-shadow，不但可以给文本添加阴影，还可以实现文本的描边和发光效果。语法为：
text-shadow:length||length||opacity||color
其中，length表示阴影在水平和垂直方向相对于文字本身的偏移距离，可以为负值；opacity表示阴影效果模糊的距离，不能为负，0表示没有模糊；color表示阴影的颜色值。已获得所有浏览器厂商新版本的支持。

示例：
text-shadow:5px 5px 3px #333;
text-shadow:-5px -5px 3px #00f;
还可以在上下左右四个方向为文字设置多个阴影：
text-shadow:-5px -5px 3px #00f,5px 5px 3px #333;
不设置模糊距离，就可以实现文本描边效果：
text-shadow:-1px 0 #333,0 -1px #333,1px 0 #333,0 1px #333;
可以为每个方向上的阴影设置不同的颜色。如果将左和上的阴影颜色设为白色，会有凸起效果；而向下和右的阴影颜色设为白色，会有凹陷效果：
text-shadow:-1px 0 #fff,0 -1px #fff,1px 0 #333,0 1px #333;
text-shadow:-1px 0 #333,0 -1px #333,1px 0 #fff,0 1px #fff;
如果不设置阴影水平和垂直的偏移距离，仅设置模糊作用距离，配合背景，可实现发光效果：
text-shadow:0 0 10px #fff;

2）text-overflow属性：

CSS3的溢出文本处理属性，语法为：
text-overflow:clip|ellipsis|ellipsis-word
其中，clip表示直接裁切溢出的文本；ellipsis表示文本溢出时显示省略标记，代替最后一个字符；ellipsis-word也表示文本溢出时显示省略标记，代替的是最后一个词。示例：
overflow:hidden; /溢出内容设为隐藏/
white-space:nowrap; /强制文本单行显示/
text-overflow:ellipsis; /设置溢出文本显示为省略标记/
Firefox不支持该属性。

3）word-wrap和word-break：

word-wrap为边界换行属性，设置或检索当前行超过指定容器边界时是否断开换行。语法：
word-wrap:normal|break-word;
其中，normal表示为默认的连续文本换行，允许内容超出边界；break-word表示内容将在边界内换行，如果需要，词内换行也会发生。
word-break为字内换行属性，设置或检索对象内文本的字内换行行为。语法：
word-break:normal|break-all|keep-all;
该属性的值与使用的语言有关系。

4）@font-face规则：

CSS字体通常会受到客户端的限制，只有客户端安装了该字体之后样式才能正确显示。CSS3新增了字体自定义功能，通过@font-face规则来引用互联网上任一服务器中存在的字体。语法：
@font-face:{属性:值;}
其中的属性和值为：
·font-family：设置文本的字体名称，该名称可被当作字体引用
·font-style：设置文本样式
·font-variant：设置文本是否为小型大写字母大小写
·font-weight：设置文本的粗细
·font-stretch：设置文本是否横向的拉伸变形
·font-size：设置文本字号大小
·src：设置自定义字体的相对路径或者绝对路径，可包含format信息
对于@font-face的兼容，主要是字体format的问题，因为不同的浏览器对字体格式的支持不一致。TrueTpe(.ttf)格式的字体对应的format属性为truetype；OpenType(.otf)格式的字体对应的format属性为opentype；Embedded Open Type(.eot)格式的字体对应的format属性为eot。示例：
@font-face {
font-family:myfont;
src:url(…/font/HEMIHEAD.TFF) format(“tryetype”);
}
中文字体文件都是几MB到十几MB大小，会严重影响网页的加载速度，如果是少量特殊字体，建议使用图片来替代。而英文的字体文件只有几十kB，非常适合使用@font-face规则。

2.色彩模式和不透明度：

CSS3新增了HSL色彩模式，还增加了颜色本身的不透明度设置和单独的不透明度属性。

1)HSL色彩模式：

HSL色彩模式通过对色调Hue、饱和度Saturation和亮 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 度Lightness三个颜色通道的变化及相互之间的叠加来得到各式各样的颜色，几乎包括了人类视力所能感知的所有颜色。语法：
hsl(,,)
其中，第一个参数表示色调Hue，可以任意取值，该值除以360所得的余数为0表示红色，为60表示黄色，为120表示绿色，为180表示青色，为240表示蓝色，为300表示洋红色；第二个参数表示饱和度Saturation，值为百分比，范围从0%到100%，0%表示灰度无色，100%表示最鲜艳；第三个参数表示亮度Lightness，为百分比，范围从0%到100%，0%最暗，50%均亮，100%最亮。
利用HSL色彩模式，首先确定网页的主色调，然后通过调整饱和度和亮度，即可在同一色系中选择颜色，整体上有统一的感觉。

示例：
background-color:hsl(0,0%,90%);
color:hsl(0,100%,50%);

2)HSLA色彩模式：

HSLA色彩模式是HSL色彩模式的延伸，增加了不透明度参数。语法：
hsl(,,,)
增加的第四个参数表示不透明度，取值在0到1之间，取值为1时与HSL色彩模式相同。
background-color:hsl(40,50%,50%,0.1);

3)RGBA色彩模式：

RGBA色彩模式是RGB色彩模式的延伸，在红、绿、蓝三原色基础上增加了不透明度参数。语法：
rgba(,,,)
前三个参数分别表示红、绿、蓝颜色的取值，范围在0到255之间的整数，也可以是0.0%到100.0%之间的百分数，但有些浏览器不支持百分数。第四个参数表示不透明度，取值在0到1之间，取值为1时与RGB色彩模式相同。
background-color:rgba(255,153,0,0.1);

4)Opacity属性：

CSS3还有专门的不透明度属性opacity，可以设置半透明效果，可以应用到任何页面元素中。语法：
opacity:|inherit
其中，表示不透明度，取值在0到1之间，默认为1，表示完全不透明，0表示完全透明；inherit表示继承父元素的不透明度。在IE8及以前的浏览器版本中，透明效果使用filter来设置：filter:alpha(opacity=)
半透明的遮蔽层是网页中常用的表现形式，常常是为了突出弹出层的内容，需要一个半透明的遮蔽层来遮挡页面的其他内容。

3. 背景：

在布局和美化页面方面，常常离不开对背景的设置。CSS3增强了原有背景属性的功能，并增添了一些新的背景属性。语法：
background:[background-image]|[background-origin]|[background-clip]|[background-repeat]|[background-size]|[background-position];
其中，background-image指定或检索对象的背景图像；background-origin指定背景的原点位置，新增属性；background-clip指定背景的显示区域，新增属性；background-repeat设置或检索对象的背景图像是否及如何重复铺排；background-size指定背景图片的大小，新增属性；background-position设置或检索对象的背景图像位置。如果定义多重背景图，则用逗号隔开各个背景图设置。如果使用子属性直接定义，各个子属性也用逗号对应依次隔开。

1)定义多个背景图片：

CSS3中，可以对一个元素应用一个或多个图片作为背景，只需要用逗号来区分各个图片。第一个声明的图片定位在元素顶部，其他的图片依次在其下排列。

示例：
background:url(…/images/icon12.png) 120px 110px no-repeat, url(…/images/icon5.png) 400px 10px no-repeat, url(…/images/j10-2.png) no-repeat;
也可以写成：
background-image:url(…/images/icon12.png), url(…/images/icon5.png), url(…/images/j10-2.png);
background-position:120px 110px , 400px 10px , 0 0;
background-repeat:no-repeat no-repeat no-repeat;

2)指定背景的原点位置：

CSS3的新增属性background-origin用来指定背景图像的原点位置，默认情况下总是以元素边框以内的左上角为坐标原点进行背景图像定位。语法：
background-origin:border-box|padding-box|content-box
其中，border-box表示原点位置为边框区域的开始位置；padding-box表示原点位置为内边框区域的开始位置；content-box表示原点位置为内容区域的开始位置。
可见，该原点位置不是通过直接给出原点坐标指定的，而是根据盒模型的结构来确定的，这对于网页背景的布局有一定的优势。但这部分属性目前需要加浏览器前缀。

示例：
-webkit-background-origin:border-box;
-moz-background-origin:border-box;
background-origin:border-box;

3)指定背景的显示区域：

CSS3的新增属性background-clip用来指定背景的显示区域。语法：