多语言展示
当前在线:1158今日阅读:112今日分享:19

css3渐变之径向渐变radial-gradient

CSS3新增渐变(gradients)属性,可以让两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变(gradients)替代使用图像来实现这些效果,减少下载的事件和宽带的使用,大大提高工作效率。CSS3 定义了两种类型的渐变(gradients):1、线性渐变(Linear Gradients):向下/向上/向左/向右/对角方向;2、径向渐变(Radial Gradients): 由它们的中心定义;注意:渐变(gradients)的兼容性ie10支持gradients属性(IE9 及之前的版本不支持渐变);chrome 、Safari、Firefox、Opera 支持替代的 -webkit-渐变类型、-moz-渐变类型 、-o-渐变类型 属性;
工具/原料
1

网页编辑器

2

浏览器

css3径向渐变radial-gradient
1

径向渐变用于表现从中心向外发散的色彩渐变效果。径向渐变基本语法: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部分:

径向渐变示例
效果如图:

2

颜色结点分布不均匀的径向渐变注意,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)设置
1

径向渐变的形状(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部分:

形状为椭圆形的径向渐变
效果如图:

2

形状为圆形的径向渐变例子: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部分:

closest-side
farthest-side
closest-corner
farthest-corner
效果如图:

注意事项
1

注意,radial-gradient的兼容性

2

希望小编分享的原创经验对好伙伴们有所帮助,如果小伙伴们有对本经验有任何疑问,请在下方评论处留言讨论,小编第一时间来解答!

推荐信息