Css技术中线性渐变的语法

对象选择器 { background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色); }

径向渐变的语法

对象选择器 { background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色); }

渐变的兼容方法

1、线性渐变

各浏览器前缀

(1)Firefox

(2)Safari , Chrome

(3)Opera 11.10+

兼容IE

2、径向渐变

径向渐变和线性渐变的语法差不多

渐变应用实例

1、径向渐变做大背景

background-color:#4B770A; background-image:-webkit-gradient(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%); background:-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)66%,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%); background: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:inset0px1px0px0px#ffffff; -webkit-box-shadow:inset0px1px0px0px#ffffff; box-shadow:inset0px1px0px0px#ffffff; 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-gradient(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; -webkit-border-radius:6px; border-radius:6px; border:1pxsolid#dcdcdc; display:inline-block; cursor:pointer; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px24px; text-decoration:none; text-shadow:0px1px0px#ffffff; margin-top:100px; } .myButton:hover{ background:-webkit-gradient(linear,lefttop,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.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed',GradientType=0); background-color:#dfdfdf; } .myButton:active{ position:relative; top:1px; }

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！