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://csruizhi.cn/article/jpipeo.html

其他资讯

Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号
友情链接: 移动手机网站制作 宜宾网站设计 网站建设方案 成都定制网站建设 成都网站制作 高端品牌网站建设 教育网站设计方案 成都网站建设 重庆企业网站建设 重庆电商网站建设 营销型网站建设 营销型网站建设 成都网站设计 成都网站设计 成都网站制作 网站建设 成都网站建设 企业手机网站建设 成都网站设计 高端网站建设 自适应网站设计 成都网站制作