CSS3不一样的渐变

一、 兼容性

在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持，最好加兼容前缀。

二、 渐变类别

线性渐变，径向渐变、重复线性渐变和重复径向渐变。

①线性渐变

语法： .gradient {background: linear-gradient(direction, color-stop1, color-stop2, ...)};

线性渐变

★ 起始和结束中间可以放多个过渡颜色，开始位置，结束位置可以省略，但是其它参数不能省略。

★ 起始点可以使用关键字“to top/top”,也可以使用角度，但是top在safari可以使用，但是to top就不行，故推荐使用角度，推荐使用角度！ 

★ 如果要兼容IE6/7/8/9（只支持线性渐变），加入该属性：

②径向渐变

语法：.gradient {background: radial-gradient(center, shape, size, start-color, ..., last-color);}

★ 圆心位置可以使用百分比，也可以使用关键字，还可以使用px 。

★ 圆心位置默认中心、圆形，只有颜色属性不能省略。 

③重复线性渐变

.gradient { background: repeating-linear-gradient(0deg, #f9f9f9 34px, #ccc 35%); } 

参数一样，就不多说了，该demo是一个记事本的效果，低版本Opera 11.6 - 12.0/Firefox 3.6 - 15需加前缀兼容。

④重复性径向渐变

.gradient { background: repeating-radial-gradient(red, yellow 10px, green 20px); }

这个demo是一个看着头就晕的那种光晕图，低版本Opera 11.6 - 12.0/Firefox 3.6 - 15需加前缀兼容。

当然如果你已经熟悉了原理，实际开发时为了节省时间，你可以使用：渐变在线生成器。

---

如果喜欢，不要吝啬你的爱心“❤”哦！