以webkit内核浏览器为例，语法：div{
width:200px;
height:200px;
background:-webkit-linear-gradient(left,#F39,#09C);
}如图：参数：-webkit-linear-gradient是webkit引擎对渐变的实现参数。第一个参数控制渐变方向，比如left（由左向右）right（由右向左）。第二个和第三个..
分类：
Web程序 时间：
2017-05-18 20:26:21
阅读次数：
198
1.渐变：Gradients 线性渐变 - 从上到下（默认情况下） 线性渐变 - 从左到右 2.CSS3 过渡，CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 <!DOCTYPE html> <html> <head> <meta c ...
分类：
Web程序 时间：
2017-05-16 10:07:06
阅读次数：
348
具备的功能： 1、左右自动轮播 2、鼠标悬停在图片上时，停止轮播，移除时，开始轮播 3，点击导航圆点，移到响应位置图片，同时导航圆点有0.3秒的显示特效 4、鼠标移到屏幕左右时，出现线性渐变特效，点击，会左右移到图片 最终结果图： 完整代码： ...
分类：
其他好文 时间：
2017-05-06 00:57:31
阅读次数：
251
一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变 1、 linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果 语法： linear-gradient( [< ...
分类：
Web程序 时间：
2017-05-05 21:44:39
阅读次数：
344
linear-gradient： (线性渐变） 创建遮罩图像。 radial-gradient： (径向渐变) 创建遮罩图像。 repeating-linear-gradient： 重复的(线性渐变) 创建背遮罩像。 repeating-radial-gradient： 重复的(径向渐变) 创建遮罩 ...
分类：
其他好文 时间：
2017-05-04 20:18:22
阅读次数：
199
原文链接：http://caibaojian.com/css3-background-gradient.html 综上所述，线性渐变的兼容写法如下：· 来源：前端开发博客 ...
分类：
其他好文 时间：
2017-04-26 13:04:49
阅读次数：
147
效果如下： 老式写法 参考：http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html ...
分类：
Web程序 时间：
2017-04-11 16:58:00
阅读次数：
256
/** * Created by xianrongbin on 2017/3/9. */ /* strokeStyle 或 fillStyle 属性的值*/ /** * Demo1 创建线性渐变 */ var dom = document.getElementById('clock'), ctx =... ...
分类：
其他好文 时间：
2017-03-22 22:49:41
阅读次数：
149
去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 一个完整的进度条效果其实可以拆分一下： 一段背景； 一小段的静态的斜纹进度条； 斜纹进度条用线性渐变 linear-gradient 类实现，原理很好理解，2个参数： 1、角度； 2、关键点（包含2个 ...
分类：
Web程序 时间：
2017-03-11 19:41:22
阅读次数：
264
