CSS实现渐变效果.doc

CSS实现渐变效果16六2011at13:59y-cssCSSCSS渐变浏览器兼容滤镜本来想把标题叫做《强大的CSS渐变》,最后还是决定低调一点,相比使用图片,CSS渐变暂时还没那么强大。不过目前的渐变已经能够满足普通的网页制作需要,而且对各个浏览器的兼容都不错,可以放心使用而不用担心某某浏览器下的狰狞面目。一般比较特殊的效果,都不会是个多么统一的CSS属性,每个浏览器都喜欢搞个私有属性来实现o(???)o。IE中实现CSS渐变先说IE,以往总是到了最后,把IE拎出来哀婉叹息一番,说它这个不好那个不支持,不过对于CSS渐变,IE总算先行一步,在firefox,safari„不能做到的时候,它做到了。IE使用滤镜filter来实现渐变效果:filter:progid:(startcolorstr=red,endcolorstr=blue,gradientType=0)参数说明:startcolorstr:渐变开始处的颜色,可以用颜色名称(如red,blue),也可以用十六进制(如#ff0000)endcolorstr:渐变结尾处的颜色gradientType:0代表纵向渐变,1代表横向渐变上图所示的渐变,CSS书写为:wdith:400px;height:200px;filter:progid:(startcolorstr=#6bbffd,endcolorstr=#0062a6,gradientType=0);-ms-filter:“progid:(startcolorstr=#6bbffd,endcolorstr=#0062a6,gradientType=0)”;IE8可以使用-ms-filter,IE8以下使用filter,-ms-filter是filter的别名,前者的属性值必须放在引号中,后者则无所谓。filter比较耗费资源,希望IE在以后的版本可以推出更好更炫的方法。:线性(-moz-linear-gradient)和径向(-moz-radial-gradient),本文仅对线性渐变-moz-linear-gradient进行说明。基本格式:-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*point:渐变起始点,指定渐变的方向,可以使用top,bottom,left,right,也可用百分比,或者像素来控制。如果不指定任何值,将开始从上至下的垂直渐变。如果是水平渐变,只需设置”leftcenter”或”rightcenter”,如果是垂直渐变,只需填写”topcenter”或”bottomcenter”。firefox下center可以省略,即只填写top或left和带上center效果一样。填写”topright”就是从左上到右下的渐变。使用百分比时,最好配合angle来控制渐变方向。angle:通过改变角度,可以更好的控制渐变的方向,角度是渐变线围绕水平轴逆时针形成的角度