3、Box-shadow
CSS3背景和边框模块拥有一个非常好的新特性名叫box-shadow,它已经在Safari 3+和Firefox 3.1 (Alpha)中得以实现。其规则提及了多重阴影,但是作者已经对此提出了质疑,并且Safari 3并没有将其实现。
此属性由3个长度参数和一个颜色参数组成,其中长度参数有:
(1) 阴影的横向位移量,正值意着阴影靠右,负值则靠左;
(2) 阴影的纵向位移量,负值意着阴影靠上,正值则靠下;
(3) 褪色渐变半径,如果值为0则阴影会被直接切断,值越高褪色渐变的效果就越明显。
4、background-origin和background-clip
Mozilla、Safari 3和Konqueror都已经实验性实现了CSS3中的background-origin属性和background-clip属性。Opera在上一个公开版本中有一个稳定的、基于早期Opera 2.3中背景和边框规范的基础实现。
background-origin属性用来决定如何在盒模型中计算background-position的值。
此属性有三种取值:border-box、padding-box和content-box。如果你使用了padding-box,则背景的位置计算会相对于内边距区域的左上角;border-box则相对于边框的左上角;content-box则相对于其内容的左上角。基于Gecko或Webkit的浏览器使用了过时的规范版本,其取值为border、padding和content。
background-clip属性用来决定背景是否要扩展到边框里。默认值是border-box,即扩展到边框里。但如果将其赋值padding-box则不会。如果你使用content-box则背景只会在有内容的矩形区域显示(这个可选值已经在最近的规范中去掉了)。
5、HSL颜色值
跟使用16进制的RGB(红、绿、蓝)颜色值一样,CSS3也可以识别HSL(色相、饱和度、亮度)颜色值。
HSL颜色值有三个参数:
色相是指色盘的度数,0度或360度是红色,120度是绿色,240度是蓝色。我们可以在0度到360度之间取值以表示不同的色调。
饱和度值是一个百分数,100%表示完全饱和的颜色。
亮度值也是一个百分数,0%表示全黑,100%表示全白,50%则表示中间值。
这种颜色值为我们确定可用颜色和风格提供了一个非常广阔的空间。
现如今,HSL已经被Opera 9.5、Safari 3、Konqueror和Mozilla浏览器所实现。
6、Box-sizing:盒模型为简单应用做了扩展
CSS3提供了一个叫做box-sizing的新的属性,这个属性让我们改变浏览器在计算元素宽度方面的特性。默认情况下,box-sizing的值是content-box。在这种情况下,计算宽高时会遵照CSS2.1的相关规则,再加入边框和内边距的宽高。如果把值设置为border-box,则你可以强制浏览器不按照规范中的宽高进行渲染,而是把边框和内边距直接算在盒模型内。
Firefox已经实现了这一特性,属性名为-moz-box-sizing。Safari使用-webkit-box-sizing属性名,Opera直接使用box-sizing属性名。
优尔、 结束语
毕业设计,大学毕业前的最后一次学业任务,同时也是对大学四年所学知识的一次总结和升华。我的毕业设计做一个关于传播苗族文化的网站,在这次的毕业设计中我学到了很多,也有很多的感悟。
首先,在这次设计中我不仅对之前所学过的知识有了一次实际的运用和实践,重要的是以前很多课本里我不知道的东西通过这次毕业设计我得到了更好的掌握,还自学到了很多课外的东西。从选题到实现,从前台网页设计的实现,到后台代码的编辑,我运用到了photoshop、dreamweave、mysql等开发工具,还运用到了新的HTML5、CSS3等语言。在系统的开发过程中,多门以前感觉很抽象的课程,如网页设计、数据库原理、SQL等变得清晰起来,强烈地感觉到这几门理论课程在实践中的重要性。整个过程中,从需求分析到设计、编码、测试,我都力求规范化和文档化,努力让自己以前学的知识运用到本网站中。 Html5+CSS3川南苗族文化传播网站的分析设计与开发+ER图+流程图(9):http://www.youerw.com/jisuanji/lunwen_743.html