怎么用css实现渐变效果
这篇文章将为大家详细讲解有关怎么用css实现渐变效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供成都网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业岚县免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
一、css背景色渐变样式
1.css线性背景渐变样式
语法:
background-image:linear-gradient(
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(colorstops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比。
代码(考虑浏览器兼容性):
.demo{
width:500;
height:300;
margin:50pxauto;
}
.demo*{
width:200px;
height:200px;
margin:20px;
text-align:center;
line-height:200px;
color:#fff;
font-size:16px;
float:left;
}
.demo1{
/*底色*/
background-color:#fd0d0d;
/*chrome2+,safari4+;multiplecolorstops*/
background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#fd0d0d),color-stop(0.66,#d89e3c),color-stop(0.83,#97bb51));
/*chrome10+,safari5.1+*/
background-image:-webkit-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*firefox;multiplecolorstops*/
background-image:-moz-linear-gradient(top,#fd0d0d,#d89e3c,#97bb51);
/*ie6+*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c');
/*ie8+*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c')";
/*ie10*/
background-image:-ms-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*opera11.1*/
background-image:-o-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*标准写法*/
background-image:linear-gradient(#fd0d0d,#d89e3c,#97bb51);
}
.demo2{
/*底色*/
background-color:#d41a1a;
/*chrome2+,safari4+;multiplecolorstops*/
background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#d41a1a),color-stop(0.66,#d9e60c),color-stop(0.83,#5c7c99));
/*chrome10+,safari5.1+*/
background-image:-webkit-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);
/*firefox;multiplecolorstops*/
background-image:-moz-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);
/*ie10*/
background-image:-ms-linear-gradient(45deg,#d41a1a0%,#d9e60c100%);
/*opera11.1*/
background-image:-o-linear-gradient(45deg,#d41a1a,#d9e60c);
/*标准写法*/
background-image:linear-gradient(45deg,#d41a1a,#d9e60c);
}