整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
午制作网页时，写了一个利用 CSS3 实现网页背景颜色渐变的效果，晚上整理代理时，发现这效果还挺好玩的。记录下来，以后再写这种网页背景颜色渐变的效果时，只能复制就行了。
网页背景颜色的渐变，利用了 CSS3 中的 Gradients 属性，下面飞鸟慕鱼就来详细的说一说哦。
CSS3 的渐变效果有两种，分别为：Linear Gradients(线性渐变) 和 Radial Gradients(径向渐变)。
Linear Gradients 定义：用线性渐变创建一个背景图像
语法：
background-image: linear-gradient(point,color1,color2,.....);
参数：
point：(可选)为渐变的坐标值，如省略则默认从上到下渐变，
color：为颜色值，可以写入多个，如：red，#fff
1、CSS3 背景颜色四个方向的线性渐变
/**默认向下渐变*/ background-image: linear-gradient( red , yellow); /**向上渐变*/ background-image: linear-gradient(to top ,red , yellow); /**向右渐变*/ background-image: linear-gradient(to right ,red , yellow); /**向左渐变*/ background-image: linear-gradient(to left ,red , yellow);
运行结果：
了线性渐变以外，HTML 5 Canvas API还支持径向渐变（放射性渐变），就是颜色会介于两个指定圆间的锥形区域平滑变化。径向渐变和线性渐变使用了颜色终止点是一样的，如果要实现它，就需要使用方法createRadialGradient。
绘制径向渐变
createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿着两个圆之间的锥面绘制渐变。其中前三个参数代表开始的圆，圆心为（x0，y0），半径为r0。最后三个参数代表结束的圆，圆心为（x1，y1），半径为r1。
（1）编写代码如下图所示，在<body>标签中加入以下代码。
（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中，从圆心的中心亮点开始向外逐步发散，形成了一个径向渐变。
小提示：上面代码中，首先创建渐变对象gradient，此处使用方法createRadialGradient创建了一个径向渐变，下面使用addColorStop添加颜色，最后将渐变填充到上下文环境中。
tml的css3实现带渐变的炫酷按钮
用到的技术有CSS3的渐变，CSS3动画等
效果图：
实现代码
html:
css:
*请认真填写需求信息，我们会在24小时内与您取得联系。
