网页编辑器
浏览器
径向渐变用于表现从中心向外发散的色彩渐变效果。径向渐变基本语法:background: radial-gradient(center, shape size, start-color, ..., last-color);径向渐变由它的中心定义,创建一个径向渐变,必须至少定义两种颜色结点;center:渐变的中心的位置shape:形状(圆形或椭圆形)size:大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)例子:css部分:.radial1{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(sandybrown,orangered);/* Safari 5.1 - 6.0 */ background:-moz-radial-gradient(sandybrown,orangered);/* Firefox 3.6 - 15 */ background:-o-radial-gradient(sandybrown,orangered);/* Opera 11.6 - 12.0 */ background:radial-gradient(sandybrown,orangered);/* 标准 */ color:#fff; text-align: center; line-height: 200px; /*border-radius: 50%;*/ }html部分:
颜色结点分布不均匀的径向渐变注意,radial-gradient的兼容性,具体代码如下:例子:css部分:.radial2{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/*webkit核心浏览器兼容代码 */ background:-moz-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* Firefox 浏览器兼容代码 */ background:-o-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* Opera 浏览器兼容代码 */ background:radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* 标准 */ color:#fff; text-align: center; }html部分:
径向渐变的形状(shape)设置shape 参数定义了形状,它可以是值 circle 或 ellipse。其中,circle 表示圆形;ellipse 表示椭圆形;默认值是 ellipse。例子:形状为椭圆形的径向渐变css部分:.radial4{ margin:50px auto; width:300px; height:200px; background:-webkit-radial-gradient(ellipse,red,blue,green); background:-moz-radial-gradient(ellipse,red,blue,green); background:-o-radial-gradient(ellipse,red,blue,green); background:radial-gradient(ellipse,red,blue,green); color:#fff; text-align: center; }html部分:
形状为圆形的径向渐变例子:css部分: .radial3{ margin:50px auto; width:300px; height:200px; background:-webkit-radial-gradient(circle,red,blue,green); background:-moz-radial-gradient(circle,red,blue,green); background:-o-radial-gradient(circle,red,blue,green); background:radial-gradient(circle,red,blue,green); color:#fff; text-align: center; }html部分:
size 参数定义了渐变的大小。它可以是以下四个值:closest-side:径向渐变的半径长度为从圆心到离圆心最近的边farthest-side:径向渐变的半径长度为从圆心到离圆心最远的边closest-corner:径向渐变的半径长度为从圆心到离圆心最近的角farthest-corner:径向渐变的半径长度为从圆心到离圆心最远的角例子:css部分:.size1{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(60% 55%, closest-side,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */ background:-moz-radial-gradient(60% 55%,closest-side,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */ background:-o-radial-gradient(60% 55%,closest-side,red,yellow,green,blue);/* Opera 浏览器兼容代码 */ background:radial-gradient(60% 55%, closest-side,red,yellow,green,blue);/* 标准 */ color:#fff; text-align: center; } .size2{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(60% 55%, farthest-side,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */ background:-moz-radial-gradient(60% 55%,farthest-side,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */ background:-o-radial-gradient(60% 55%,farthest-side,red,yellow,green,blue);/* Opera 浏览器兼容代码 */ background:radial-gradient(60% 55%, farthest-side,red,yellow,green,blue);/* 标准 */ color:#fff; text-align: center; } .size3{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(60% 55%, closest-corner,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */ background:-moz-radial-gradient(60% 55%,closest-corner,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */ background:-o-radial-gradient(60% 55%,closest-corner,red,yellow,green,blue);/* Opera 浏览器兼容代码 */ background:radial-gradient(60% 55%, closest-corner,red,yellow,green,blue);/* 标准 */ color:#fff; text-align: center; } .size4{ margin:50px auto; width:200px; height:200px; background:-webkit-radial-gradient(60% 55%, farthest-corner,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */ background:-moz-radial-gradient(60% 55%,farthest-corner,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */ background:-o-radial-gradient(60% 55%,farthest-corner,red,yellow,green,blue);/* Opera 浏览器兼容代码 */ background:radial-gradient(60% 55%, farthest-corner,red,yellow,green,blue);/* 标准 */ color:#fff; text-align: center; }html部分:
注意,radial-gradient的兼容性
希望小编分享的原创经验对好伙伴们有所帮助,如果小伙伴们有对本经验有任何疑问,请在下方评论处留言讨论,小编第一时间来解答!