CSS3 渐变

发表于 2016-12-30 16:01:52   |   下载附件   |   字体:
渐变CSS3渐变背景渐变
默认上下
background: -webkit-linear-gradient(#fff1b1, #ffd869); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#fff1b1, #ffd869); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#fff1b1, #ffd869); /* Firefox 3.6 - 15 */
background: linear-gradient(#fff1b1, #ffd869); /* 标准的语法 */


带角度

background: -webkit-linear-gradient(-45deg,#fff1b1, #ffd869,#f00); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-45deg,#fff1b1, #ffd869,#f00); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-45deg,#fff1b1, #ffd869,#f00); /* Firefox 3.6 - 15 */
background: linear-gradient(-45deg,#fff1b1, #ffd869,#f00); /* 标准的语法 */


从左到右

background: -webkit-linear-gradient(left,#fff1b1, #ffd869,#f00); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left,#fff1b1, #ffd869,#f00); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left,#fff1b1, #ffd869,#f00); /* Firefox 3.6 - 15 */
background: linear-gradient(left,#fff1b1, #ffd869,#f00); /* 标准的语法 */


IE系列的滤镜

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/