CSS3新增的部分属性

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(,,) 其中，第一个参数表示色调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用来指定背景的显示区域。语法： 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:[||auto]{1,2}|cover|contai 或值用来设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个值设置为auto。其中，直接指定背景图像的高度和宽度，是基于父元素尺寸的百分比来确定背景图像的宽和高，其中父元素的计算尺寸包括父元素的内边距，不包括边框。 Cover表示保持背景图像本身的宽高比例将图像缩放到正好完全覆盖所定义的背景区域，可能会裁剪掉部分图像；contain表示保持背景图像本身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会完全覆盖背景区域。

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

4.边框：

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

1)border-radius属性：

border-radius为CSS3新增的用来设计边框圆角的属性。语法： border-radius:none|{1,4}[/{1,4}]? 其中，none是默认值，表示没有圆角；为长度值，不能为负值，分为两组，每组可以有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|[|{1,4}[/{1,4}]?[stretch|repeat|round]{0,2} 其中，none默认值，表示边框没有背景图；使用绝对或相对的url地址指定图像源；裁切边框图像大小，没有单位，默认以像素为单位；裁切边框图像大小，使用百分比表示；用于设定边框宽度，不能为负值；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属性语法中，或都可以用于定义边框图像的切片，定义出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:[|transparent]{1,4} 其中，是一个颜色值，可以是半透明颜色；transparent是透明值，不设颜色时使用，为默认值。可以分别为元素的4个边框设置颜色，也派生4个子属性，分别是border-top -color、border-right-color、border-bottom-color、border-right-color。Firefox浏览器还支持为每个边框定义多个颜色，从外到内显示，每种颜色1px宽度，最后一种颜色被用于剩下的宽度。