CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用CSS3渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
css好看的渐变色背景
突变方式
线性突变
放射性突变
线性突变
语法:linear-gradient(tobottom,colorStrat,colorEnd)
参数意义:
第一个参数指定突变的方向
tobottom从上至下;tobottomright从左上至右下;toright从左至右;toupright从左下至右上;
toup从下至下;toupleft从右下至左上;toleft从右至左;tobottomleft从右上至左下
第二个参数指定突变色的开始色彩
第三个参数指定突变色的完毕色彩
background:linear-gradient(30deg,yellow,blue);
background:linear-gradient(tobottom,yellow,blue);
设置偏移量
background:linear-gradient(tobottom,yellow20%,blue70%)
background:linear-gradient(tobottom,yellow
0
%,blue
25
%,lightcoral
75
%,darkcyan
100
%);
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。