浅谈下一代Web标准之CSS3的新特性.docVIP

浅谈下一代Web标准之CSS3的新特性 　　目前，Html5和CSS3是最流行的Web客户端开发技术。CSS是将网页内容与外国显示分离的网页设计技术，随着Web2.0的流行，CSS3标准也随之应运而生，本文阐述了CSS的发展状况、什么是CSS3和重点介绍了CSS3新增的一系列强大的新特性以及这些属性的使用方法。 　　【关键词】HTML5 CSS3 网页设计 　　现阶段，使用最广泛的是CSS2.0/2.1标准，目前各大主流浏览器都支持CSS2.1中几乎所有的功能，随着互联网技术日新月异的变化，网页设计应用越来越复杂，用户需要网站性能越来越高，网页界面更加精致美观，用户体验更加友好，CSS2中的功能与属性已经满足不了现有的网页设计需求，为了满足日益增长的客户端Web UI的应用开发需求，新一代CSS技术标准应运而生――CSS3。它不仅扩展和延续了CSS2中已有的功能，而且新增了一系列强大的特性和Web UI效果。CSS3的出现，改变了传统HTML页面的样式效果，很大程度上简化了Web客户端的开发模型，大大提高了设计师网页开发效率，以前必须要使用javascript脚本和许多图片叠加实现的效果（如圆角边框），现只需用几行CSS3简单的代码就可以完成，这不仅比使用javascript脚本简单的多，而且维护起来比较容易，在性能上也突飞猛进了。 　　1 什么是CSS3 　　HTML定义内容的含义，为网页构建基本的结构，而CSS（Cascading Style Sheet，层叠样式表）则定义它们的外观，包括大小、颜色、边框以及元素的精确定位等。CSS于1996年正式推出，1998年W3C发布了CSS2，CSS3是CSS的升级版本。CSS3比CSS早期版本更为强大，它提供了更加丰富且实用的特性，且引入了大量的视觉效果，如文字阴影特效、圆角边框、多图片背景、渐变、多列布局、过渡、转换和动画等。CSS3提供的新特性，只需要一些简单的代码，就可以实现一系列令人眼前一亮的效果。 　　2 CSS的新特性和应用 　　CSS3并没有采用总体结构，而是把总体分为几个模块，采用互相独立的模块化结构， 这样有利于CSS3的推广。下面就重点介绍一下CSS3的新特性以及应用。 　　2.1 RGBA透明度 　　在CSS3中新增了RGBA用来指定颜色，还能设定元素的透明度。例如： 　　background：rgba（89，255，127，0.5）； 　　当设定一个RGBA色彩的时候，可以在红、蓝、绿颜色值后面加上一个代表alpha透明度的参数A，该参数用于指定透明度，取值在0到1之间。当aplha参数设置越接近0，颜色越透明，例如0.5代表50%的透明度。 　　2.2 CSS3的阴影（Shadow）效果 　　在CSS3中新增了text-shadow和box-shadow属性实现阴影效果，text-shadow属性可以为段落、标题等元素中添加阴影，例如： 　　h1{text-shadow：10px 10px 5px red} 　　文本阴影text-shadow属性有四个参数：表示X轴水平偏移量为10px，Y轴垂直偏移量是10px，阴影模糊半径大小为5px，颜色为red。 　　使用box-shadow属性可为元素本身添加阴影，例如： 　　div{box-shadow：5px 5px 3px blue} 　　text hadow和box-shadow的基础属性集是相同的，不过box-shadow还有inset属性（设置内阴影）和spread（用于扩展或收缩阴影）两个可选属性。 　　2.3 CSS3圆角边框 　　在CSS3产生之前，要实现圆角效果，需要用四张制作好圆角的图片，加上javascript代码才能实现圆角效果。如今，在CSS3中添加了border-radius属性为元素添加圆角边框，例如： 　　div{border-radius：10px 10px 10px 10px} 　　表示4个角的圆角半径都相同，都是10px，还可以简化写出：border-radius：10px 。当4个角的圆角半径不同时，按照顺时针：左上脚 右上角 右下角 左下角书写。 　　2.4 CSS3的背景效果 　　CSS3新增了以下几种属性，用于设置背景（background）效果： 　　（1）background-clip属性：用于指定背景画区； 　　（2）background-origin属性：用于指定背景的位置； 　　（3）background-size属性：用于指定背景图片的大小； 　　（4）background-break属性：用于控制背景如何在不同的盒子中显示。 　　最令人期待的一个特性是CSS3支持多背景图片，例如：