HTML5、CSS3和JavaScriptAPI共同构成了新的网页标准，许多浏览器已经开始实现其中的一些新特性。其中，CSS3负责网页样式的表现。为了获得更好的性能，添加了一些新属性。目前，CSS3的一些属性在一些浏览器上处于实验阶段。为了在文档中有效地应用这个规则，必须使用相应的前缀声明。-moz-是Firefox的前缀-webkit-是Safari和Chrome的前缀-o-是Opera的前缀-khtml-是Konqueror的前缀-ms-是InternetExplorer的前缀-chrome-是GoogleChrome1、文字和字体：在CSS3中，在文字装饰方面，可以添加阴影、描边、发光等效果。在排版方式上，可以很好地控制溢出和换行，即使是特殊和稀有的字体也可以在客户端很好地显示。1）text-shadow属性：CSS3中的shadow属性text-shadow不仅可以给文字添加阴影，还可以实现文字的描边和发光效果。语法为：text-shadow:length||length||opacity||color其中，length表示阴影相对于文本本身在水平和垂直方向上的偏移距离，可以为负值；opacity表示阴影效果的模糊距离，不能为负，0表示不模糊；颜色表示阴影的颜色值。受所有浏览器供应商的较新版本支持。示例：文本阴影：5px5px3px#333；文字阴影：-5px-5px3px#00f;也可以为文字设置四个方向的多重阴影：text-shadow:-5px-5px3px#00f,5px5px3px#333;不设置模糊距离也能实现文字描边效果：text-shadow:-1px0#333,0-1px#333,1px0#333,01px#333;方向上的阴影设置不同的颜色。如果左侧和顶部阴影颜色设置为白色，则会产生凸起效果；下阴影和右阴影颜色将设置为白色，这将产生凹陷效果：text-shadow:-1px0#fff,0-1px#fff,1px0#333,01px#333;文字阴影：-1px0#333,0-1px#333,1px0#fff,01px#fff;如果不设置阴影水平和垂直偏移距离，只设置模糊效果距离，配合背景实现发光效果：text-shadow:0010px#fff;2）text-overflow属性：CSS3溢出文字处理属性，语法为：text-overflow:clip|ellipsis|ellipsis-word其中，clip表示直接裁剪溢出的文本；ellipsis表示当文本溢出时显示一个省略号，替换最后一个字符；ellipsis-word也表示当文本溢出时显示省略号，而不是最后一个单词。示例：溢出：隐藏；/设置溢出内容隐藏/white-space:nowrap;/强制文本单行显示/text-overflow:ellipsis;/设置溢出文本显示为省略号/Firefox不支持该属性。3）word-wrap和word-break：word-wrap为边界换行属性，设置或获取当前行超出指定容器边界时是否换行。语法：word-wrap:normal|break-word;其中，normal表示默认连续文本换行，允许内容超出边界；break-word表示内容会在边界内换行，必要时还会出现字内换行。word-break是分词属性，它设置或获取对象中文本的分词行为。语法：分词：正常|中断所有|保留所有；该属性的值与使用的语言有关。4）@font-face规则：CSS字体通常受客户端限制，客户端安装字体后样式才能正确显示。CSS3增加了字体自定义功能，通过@font-face规则引用Internet上任何服务器中存在的字体。语法：@font-face:{attribute:value;}属性和取值分别是：font-family：设置文字的字体名称，可以作为字体参考font-style：设置文字样式字体-variant：设置文字是否为smallcapsfont-weight：设置文字粗细font-stretch：设置文字是否横向拉伸font-size：设置文字字体大小src：设置自定义字体相对路径或绝对路径可以包含格式信息。@font-face的兼容主要是字体格式的问题，因为不同的浏览器对字体格式的支持不一致。TrueTpe（.ttf）格式的字体对应的格式属性为truetype；OpenType（.otf）格式的字体对应的格式属性为opentype；EmbeddedOpenType(.eot)格式中字体对应的格式属性为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为品红色；第二个参数表示饱和度，取值是一个百分比，范围从0%到100%，0%表示无灰度，100%表示颜色最亮；第三个参数表示Lightness，是一个百分比，取值范围是0%到100%，0%最暗，50%最亮，100%最亮。使用HSL色彩模式，首先确定网页的主色调，然后调整饱和度和亮度选择同色系的颜色，整体给人一种统一的感觉。示例：背景颜色：hsl(0,0%,90%)；color:hsl(0,100%,50%);2)HSLA颜色模式：HSLA颜色模式是HSL颜色模式的扩展，增加了opacity参数。语法：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颜色模式相同。背景色：rgba(255,153,0,0.1)；4）不透明度属性：CSS3还有一个特殊的不透明度属性opacity，可以设置半透明效果，可以应用于任何页面元素。语法：opacity:|inherit其中，表示不透明度，取值在0到1之间，默认为1表示完全不透明，0表示完全透明；inherit表示继承父元素的不透明度。在IE8及之前的浏览器版本中，使用filter设置透明效果：filter:alpha(opacity=)半透明遮罩层是网页中常见的一种表现形式，常用于突出显示弹出层的内容.用于隐藏页面其余部分的半透明覆盖层。3、背景：在页面的布局和美化方面，往往离不开背景的设置。CSS3增强了原有背景属性的功能，并增加了一些新的背景属性。语法：背景：[背景图像]|[背景原点]|[背景剪辑]|[背景重复]|[背景大小]|[背景位置]；其中background-image指定或检索对象的背景图像；background-origin指定背景原点位置，新增属性；background-clip指定背景的显示区域，新增属性；background-repeat设置或获取是否以及如何重复对象的背景图像；background-size指定背景图片的大小，新属性；background-position设置或获取对象的背景图像位置。如果定义了多个背景图像，请用逗号分隔每个背景图像设置。如果直接使用子属性来定义，各个子属性也按顺序用逗号隔开。1）定义多张背景图片：在CSS3中，一个元素可以应用一张或多张图片作为背景，只需要用逗号来区分每张图片。第一个声明的图像位于元素的顶部，其他图像排列在其下方。示例：背景：url(../images/icon12.png)120px110px不重复，url(../images/icon5.png)400px10px不重复，url(../images/j10-2.png)不重复；也可以写成：background-image:url(../images/icon12.png),url(../images/icon5.png),url(../images/j10-2.png)；背景位置：120px110px,400px10px,00;background-repeat:no-repeatno-repeatno-repeat;2）指定背景的原点位置：CSS3的新属性background-origin用于指定背景图片的位置原点位置，默认情况下，背景图片总是定位在左上角在边框内元素作为坐标原点。语法：background-origin:border-box|padding-box|content-box其中，border-box表示原点位置为边框区域的起始位置；padding-box表示原点位置为内边框区域的起始位置；content-box表示originposition是内容区域的开始位置。可以看出，原点位置并不是直接给出原点坐标来指定的，而是根据盒模型的结构来确定的，这对于网页背景的布局具有一定的优势。但是，这些属性目前需要以浏览器为前缀。示例：-webkit-background-origin:border-box;-moz-背景原点：边框框；background-origin:border-box;3)指定背景的显示区域：CSS3的新属性background-clip用于指定背景的显示区域。语法：background-clip:border-box|padding-box|content-box其中，border-box表示背景从边框显示；padding-box表示背景从内边距显示；content-box表示背景只显示在内容区域show中。示例：-webkit-背景剪辑：边框框；-moz-背景剪辑：边框框；背景剪辑：边框框；由于背景显示区域的限制，背景图片被裁剪，所以显示区域也称为裁剪区域，该属性也称为裁剪属性。4）指定背景图片的大小：CSS3新属性background-size用于指定背景图片的大小。语法：background-size:[||auto]{1,2}|cover|contai或值用于设置背景图片的高宽，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个值设置为自动。其中，直接指定背景图的高和宽，根据父元素大小的百分比来确定背景图的宽和高，这里计算的是父元素的大小包括父元素的内边距，不包括边框。覆盖是指保持背景图片本身的纵横比，将图片缩放到恰好完全覆盖定义的背景区域，并可能裁剪部分图片；contain是指保持背景图片本身的纵横比，缩放图片刚好适合定义的背景区域backgroundarea，但可能不会完全覆盖背景区域。示例：背景大小：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,定义左上角、右上角、左下角和右下角的圆角。如果边框的四个圆角的半径不同，可以使用子属性单独设置。示例：边框半径：20px；圆角效果还与边框宽度有关，如果边框宽度大于等于圆角半径，则边框内侧将不再圆角。当没有设置边框时，如果块元素有背景，则将背景的4个角定义为圆角。border-radius属性可以赋两个参数，第一个值代表左上角和右下角，第二个值代表右上角和左下角。示例：边框半径：20px40px；也可以设置3个属性和4个属性。border-radius属性还可以同时为边框的圆角指定两组半径值。第一组数值表示圆角的水平半径，第二组数值表示圆角的垂直半径。两组以/分隔。如果只有一组半径，则认为垂直半径等于水平半径。如果任何一个为0，则该角变为直角。边框半径：20px/40px；border-radius:20px30px40px50px/30px40px10px0;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-左图像、右上边界图像、左下边界图像、右下边界图像；根据边框图片的处理功能导出5个子属性：border-image-source：定义边框的图片来源，使用绝对或相对的url地址border-image-slice：定义边框图片的切片，并设置图片边框向内偏移长度border-image-repeat：定义边框图片的显示方式，stretch，repeat，flatShopborder-image-width：定义图片边框的宽度，可以同样使用border-width属性设置同样的功能border-image-outset：定义border-image的偏移位置border-image属性语法中，可以使用或来定义border-image-outset的切片borderimage，定义9个slice用于渲染borderimage。只要定义4个数值或者百分比，对应的长度就会分别在上、下、左、右4个方向从图像的边界向内偏移，形成4条线，9个切片可以通过这4行。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)90100120130/30px；-moz-border-image:url(../images/borderimage.png)90100120130/30px;-o-border-image:url(../images/borderimage.png)90100120130/30px;border-image:url(../images/borderimage.png)90100120130/30px;边框图像切片的显示方式对应的子属性为border-image-Repeat，包括stretch、repeat、round，分别表示拉伸、重复和平铺，默认值为stretch。-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重复；重复显示4个边框图像，重复该过程将保持其所属切片的纵横比。切片从边框中间向四周重复平铺，可能会部分隐藏边缘区域，无法显示完整的切片。属性值round也重复平铺切片。在平铺过程中，切片的纵横比会根据画面的大小进行调整，保证边缘区域也能显示完整的切片。您还可以将显示模式定义为两个值。第一个值用于指定上下边框的切片显示方式，第二个值用于指定左右边框的切边显示方式。边框宽度可以在border-image属性中设置，也可以使用border-width属性指定宽度。图像切片根据边界框的尺寸自动缩放切片。示例：-webkit-border-image:url(../images/borderimage.png)30/10px圆形；-moz-border-image:url(../images/borderimage.png)30/10px圆形；-o-border-image:url(../images/borderimage.png)30/10px圆形；border-image:url(../images/borderimage.png)30/10pxround;3)border-color属性：Border-color属性用于设置边框的颜色。CSS3增强了该属性的功能，可以为边框设置更多的颜色。语法：border-color:[|transparent]{1,4}其中，为颜色值，可以是半透明颜色；transparent为透明值，在没有设置颜色时使用，为默认值。可以分别为元素的四个边框设置颜色，还可以导出四个子属性，分别是border-top-color、border-right-color、border-bottom-color、border-right-color。Firefox浏览器还支持为每个边框定义多种颜色，从外向内显示，每种颜色1px宽，最后一种颜色用于剩余宽度。
