Css技术中线性渐变的语法

1、css技术中线性渐变的语法对象挑选器 background:-扫瞄器前缀-linear-gradient( 起点方向,起点色彩,尽头色彩);径向渐变的语法对象挑选器 background:-扫瞄器前缀-radial-gradient( 起点方向,外形,大小,起点色彩,尽头色彩);渐变的兼容办法1、线性渐变各扫瞄器前缀(1)firefox(2)safari , chrome(3)opera 11.10+兼容ie2、径向渐变径向渐变和线性渐变的语法差不多渐变应用实例1、径向渐变做大背景background-color:4b770a;background-image:-webkit-gradient

2、(radial,50%400,1,50%400,400,from(rgba(255,255,255,0.3),to(rgba(255,255,255,0);/仅实现了webkit下的效果2、蒙版效果position:fixed;width:100%;height:60px;bottom:0px;content:;background:-moz-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);backgroun

3、d:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgba(255,255,255,0),color-stop(33%,rgba(255,255,255,0.33),color-stop(66%,rgba(255,255,255,0.73),color-stop(91%,rgba(255,255,255,1);background:-webkit-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)6

4、6%,rgba(255,255,255,1)91%);background:-o-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-ms-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);backgrou

5、nd:linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.73)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=00ffffff,endcolorstr=ffffff,gradienttype=0);3、渐变按钮.mybutton-moz-box-shadow:inset0px1px0px0pxffffff;-webkit-box-shad

6、ow:inset0px1px0px0pxffffff;box-shadow:inset0px1px0px0pxffffff;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,ededed),color-stop(1,dfdfdf);background:-moz-linear-gradient(top,ededed5%,dfdfdf100%);background:-webkit-linear-gradient(top,ededed5%,dfdfdf100%);background:-o-linear-g

7、radient(top,ededed5%,dfdfdf100%);background:-ms-linear-gradient(top,ededed5%,dfdfdf100%);background:linear-gradient(tobottom,ededed5%,dfdfdf100%);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=ededed,endcolorstr=dfdfdf,gradienttype=0);background-color:ededed;-moz-border-radius:6px;-

8、webkit-border-radius:6px;border-radius:6px;border:1pxsoliddcdcdc;display:inline-block;cursor:pointer;color:777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px24px;text-decoration:none;text-shadow:0px1px0pxffffff;margin-top:100px;.mybutton:hoverbackground:-webkit-gradient(linear,left

9、top,leftbottom,color-stop(0.05,dfdfdf),color-stop(1,ededed);background:-moz-linear-gradient(top,dfdfdf5%,ededed100%);background:-webkit-linear-gradient(top,dfdfdf5%,ededed100%);background:-o-linear-gradient(top,dfdfdf5%,ededed100%);background:-ms-linear-gradient(top,dfdfdf5%,ededed100%);background:linear-gradient(tobottom,dfdfdf5%,ededed100%);filter:progid:dximagetransform.microso