HTML5、CSS3和JavaScript API一起造成了新的网页规范，很多浏览器曾经开始施行其中的局部新性能。其中CSS3负责网页款式的体现，为了达到更好的体现成果，减少了一些新属性。

目前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和亮度Lightness三个色彩通道的变动及相互之间的叠加来失去各式各样的色彩，简直包含了人类视力所能感知的所有色彩。语法：
hsl(<length>,<percentage>,<percentage>)
其中，第一个参数示意色调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(<length>,<percentage>,<percentage>,<alpha>)
减少的第四个参数示意不透明度，取值在0到1之间，取值为1时与HSL色调模式雷同。
background-color:hsl(40,50%,50%,0.1);

3)RGBA色调模式：

RGBA色调模式是RGB色调模式的延长，在红、绿、蓝三原色根底上减少了不透明度参数。语法：
rgba(<red>,<green>,<blue>,<alpha>)
前三个参数别离示意红、绿、蓝色彩的取值，范畴在0到255之间的整数，也能够是0.0%到100.0%之间的百分数，但有些浏览器不反对百分数。第四个参数示意不透明度，取值在0到1之间，取值为1时与RGB色调模式雷同。
background-color:rgba(255,153,0,0.1);

4)Opacity属性：

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

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用来指定背景的显示区域。语法：
background-clip:border-box|padding-box|content-box
其中，border-box示意背景从边框开始显示；padding-box示意背景从内边距开始显示；content-box示意背景仅在内容区域显示。示例：
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-clip:border-box;
因为背景显示区域的限度，背景图像被裁剪了，所以该显示区域也叫裁剪区域，该属性也叫裁剪属性。

4)指定背景图像的大小：

CSS3新增属性background-size用来指定背景图像的大小。语法：
background-size:[<length>|<percentage>|auto]{1,2}|cover|contai
<length>或<percentage>值用来设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个值设置为auto。其中，<length>间接指定背景图像的高度和宽度，<percentage>是基于父元素尺寸的百分比来确定背景图像的宽和高，其中父元素的计算尺寸包含父元素的内边距，不包含边框。
Cover示意放弃背景图像自身的宽高比例将图像缩放到正好齐全笼罩所定义的背景区域，可能会裁剪掉局部图像；contain示意放弃背景图像自身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会齐全笼罩背景区域。

示例：
background-size:30% 30%,60% 60%, 100% 100%;
上述代码设置了三个背景图像的大小，用百分比示意的。

4.边框：

边框是罕用的丑化网页手法之一。CSS3中，通过样式表，能够实现圆角边框、图像边框和多色边框等。

1)border-radius属性：

border-radius为CSS3新增的用来设计边框圆角的属性。语法：
border-radius:none|<length>{1,4}[/<length>{1,4}]?
其中，none是默认值，示意没有圆角；<length>为长度值，不能为负值，分为两组，每组能够有1到4个值，第一组为程度半径，第二组为垂直半径，如果第二组省略则默认等于第一组的值。
border-radius属性针对边框的4个角派生出4个子属性，别离为border-top-left-radius、border -top-right-radius、border-bottom-left-radius、border-bottom-right-radius，定义左上、右上、左下、右下角的圆角。如果边框的4个圆角的半径各不相同，能够应用子属性独自设置。

示例：
border-radius:20px;
圆角成果还与边框宽度无关，如果边框的宽度大于或等于圆角半径，则边框外部将不再是圆角。在不设边框时，如果该块元素有背景，则把背景的4个角定义为圆角。
border-radius属性能够被赋值为2个参数，这是第一个值示意左上角和右下角，第二个值示意右上角和左下角。示例：
border-radius:20px 40px;
还能够设3个属性和4个属性。border-radius属性还能够为边框的圆角同时指定两组半径值，第一组值示意圆角的程度半径，第二组的值示意圆角的垂直半径，两组之间用/隔开。如果半径只有一组，就认为垂直半径等于程度半径，如果任一个为0，则这个角就变成直角了。
border-radius:20px/40px;
border-radius:20px 30px 40px 50px/30px 40px 10px 0;

2)border-image属性：

CSS3新增border-image属性，专门用于图像边框的解决，可用灵便地宰割图像，并利用于边框。语法：
border-image:none|<image>[<number>|<percentage>{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}
其中，none默认值，示意边框没有背景图；<image>应用相对或绝对的url地址指定图像源；<number>裁切边框图像大小，没有单位，默认以像素为单位；<percentage>裁切边框图像大小，应用百分比示意；<border-width>用于设定边框宽度，不能为负值；stretch、repeat、round别离示意拉伸、反复、平铺，默认值为stretch。
border-image是一个复合属性，依据边框方位能够派生出8个子属性：border-top-image、border-right-image、border-bottom-image、border-left-image、border-top-left-image、border-top -right-image、border-bottom-left-image、border-bottom-right-image；依据边框图像的解决性能又派生出5个子属性：
·border-image-source：定义边框的图像源，应用相对或绝对的url地址
·border-image-slice：定义边框图像的切片，设置图像的边界向内的偏移长度
·border-image-repeat：定义边框图像的展示形式，拉伸、反复、平铺
·border-image-width：定义图像边框的宽度，也可应用border-width属性设置雷同性能
·border-image-outset：定义边框图像的偏移地位
border-image属性语法中，<number>或<percentage>都能够用于定义边框图像的切片，定义出9个切片进行边框图像渲染。只有定义4个数值或百分比就会从图像的边界别离在上、下、左、右4个方向向内偏移相应的长度，造成4条线，通过这4条线就能够确定9个切片。9个切片中，4个角上的切片会间接显示，4个边上的切片则能够设置拉伸、平铺等显示方式，两头的切片会以元素背景模式显示。所有切片都会依据边框的宽度与切片的宽度的比例进行缩放。子属性border-image-slice也能够定义边框图像的切片，但没有支流浏览器的反对。

示例：
-webkit-border-image:url(../images/borderimage.png) 30/30px;
-moz-border-image:url(../images/borderimage.png) 30/30px;
-o-border-image:url(../images/borderimage.png) 30/30px;
border-image:url(../images/borderimage.png) 30/30px;
或
-webkit-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
-moz-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
-o-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
border-image:url(../images/borderimage.png) 90 100 120 130/30px;
边框图像切片的显示方式对应的子属性为border-image-repeat，包含stretch、repeat和round，别离示意拉伸、反复、平铺，默认值stretch。
-webkit-border-image:url(../images/borderimage.png) 30/30px repeat;
-moz-border-image:url(../images/borderimage.png) 30/30px repeat;
-o-border-image:url(../images/borderimage.png) 30/30px repeat;
border-image:url(../images/borderimage.png) 30/30px repeat;
4个边框的图像反复显示，且反复过程中会放弃所属切片的长宽比例不变。切片是从边框的两头开始向四周反复平铺，在边缘区域可能会被局部暗藏，不能显示残缺的切片。
属性值round也是把切片反复地平铺，在平铺过程中会依据边框的尺寸调整切片的长宽比例，以保障在边缘区域也能显示残缺的切片。
也能够定义显示方式为两个值，第一个值用于指定上、下两个边框的切片显示方式，第二个值用于指定左、右两个边框的切边显示方式。
边框宽度能够在border-image属性设置，也能够应用border-width属性来指定宽度。图像的切片会依据边框的尺寸主动缩放切片。示例：
-webkit-border-image:url(../images/borderimage.png) 30/10px round;
-moz-border-image:url(../images/borderimage.png) 30/10px round;
-o-border-image:url(../images/borderimage.png) 30/10px round;
border-image:url(../images/borderimage.png) 30/10px round;

3)Border-color属性：

Border-color属性用于设置边框的色彩，CSS3加强了该属性的性能，能够为边框设置更多色彩。语法：
border-color:[<color>|transparent]{1,4}
其中，<color>是一个色彩值，能够是半透明色彩；transparent是通明值，不设色彩时应用，为默认值。能够别离为元素的4个边框设置色彩，也派生4个子属性，别离是border-top -color、border-right-color、border-bottom-color、border-right-color。Firefox浏览器还反对为每个边框定义多个色彩，从外到内显示，每种色彩1px宽度，最初一种色彩被用于剩下的宽度。