资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css中的渐变色和突变

代码:

目前创新互联建站已为上1000+的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、敦煌网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

css中的渐变色和突变

效果:

css中的渐变色和突变







*{
margin: 0;
padding: 0;
}
/*2个色的渐变*/
.box{
width: 600px;
height: 100px;
background:linear-gradient(to right, red ,green);
}
/*2个色的突变*/
.box2{
width: 600px;
height: 100px;
background:linear-gradient(to right,red 50%,green 50%);
}
/*3个色的渐变*/
.box3{
width: 600px;
height: 100px;
background:linear-gradient(to right,red,green,blue);
}
/*3个色的突变*/
.box4{
width: 600px;
height: 100px;
background:linear-gradient(to right,
red   0,
red   33.333%,
green 33.333%,
green 66.666%,
blue  66.666%,
blue  100%
);
}



总结:

1 按此规律,多个色块的突变一样可以实现出来

2 第一个参数可以为: to right , to left , to bottm ,to top

3 第一个参数还可以为角度: 120deg。度数增大,顺时针旋转,度数减小,逆时针旋转

css中的渐变色和突变

该效果是:

css中的渐变色和突变


分享文章:css中的渐变色和突变
文章来源:http://www.cdkjz.cn/article/jpipeo.html
返回首页 了解更多建站资讯
十二年 建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220