基于CSS3.0技术网页元素效果.docVIP

基于CSS3.0技术网页元素效果 　　 摘 要：CSS3.0技术与传统的CSS技术相比较具有模块分散化、多途径进行网页布局、按钮等多样式的设计，轻松简便地提高了网页元素效果，使网页页面结构合理，功能和视觉效果兼顾。对此进行了论述。?? 　　关键词：CSS3.0技术；网页元素；效果?? 　　中图分类号：TP393.09 文献标识码：A 文章编号：1672-7800（2011）08-0124-01?お? 　　?? 　　作者简介：何丽（1983-），女， 四川自贡人，硕士，四川理工学院助理实验师，研究方向为软件应用与理论、图像处理。 　　 　　 　　0 引言?? 　　 CSS是样式表（stylesheet）的技术，也称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS规范，有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3.0是CSS技术的升级版本，CSS技术是Web设计过程中重要的一部分， CSS3.0的出现以及越来越多的浏览器对它的支持，网页元素的设计具有了多样性、个性化的效果。?? 　　1 CSS3.0技术的特点?? 　　 CSS3.0技术基于传统的CSS一个庞大而且比较复杂整体模块的基础上语具有模块化划分，将它分解为一些小的模块，具有背景边框、文字特效、多栏布局等7个模块类型， CSS3.0技术主要是可以使用新的可用的选择器和属性，对浏览器技术具有新的要求，实现网页元素的新设计效果（譬如动态和渐变）。?? 　　 CSS3.0技术只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网页制作采用CSS3.0技术，可以有效地对页面的动画与渐变、渐变色、盒阴影和其它效果实现更加精美的体现。CSS3.0技术的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。?? 　　2 CSS3.0技术按钮制作效果实验?? 　　 CSS3.0技术是Web设计中重要组成的部分，IE浏览器版本的高低影响CSS3.0设计效果的体现，以下实验使用CSS3.0技术制作一个圆角效果的按钮在不同IE版本的效果。?? 　　 CSS3.0技术制作一个圆角效果的按钮的关键代码：?? 　　 .button {?? 　　 display: inline-block;?? 　　 zoom: 1; *display: inline;?? 　　 vertical- align: baseline;?? 　　 margin: 0 2px;?? 　　 outline: none;?? 　　 cursor: pointer;?? 　　 text- align: center;?? 　　 text-decoration: none;?? 　　 font: 14px/100% Arial, Helvetica, sans-serif;?? 　　 padding: .5em 2em .55em;?? 　　 text-shadow: 0 1px 1px rgba(0,0,0,.3);?? 　　 -webkit-border-radius: .5em; ?? 　　 -moz-border-radius: .5em;?? 　　 border-radius: .5em;?? 　　 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);?? 　　 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);?? 　　 box-shadow: 0 1px 2px rgba(0,0,0,.2);?? 　　 }?? 　　 .blue {?? 　　 color: #d9eef7;?? 　　 border: solid 1px #0076a3;?? 　　 background: #0095cd;?? 　　 background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));?? 　　 background: -moz-linear-gradient(top, #00adee, #0078a5);?? 　　 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00adee, endColorstr=#0078a5); 　　 　　 }?? 　　 所示的按钮图标效果?? 　　 支持CSS3.0标准的主流浏览器的显示效果如下?? 　　 Google chrome 12.0 Fi