css3重复渐变效果（重复渐变构成图片简笔画）

css3重复渐变 repeating gradient即重复让线性渐变（linear-gardient）或者径向渐变（radial-gradient）重复执行。

用法是repeating-linear-gradient(重复线性渐变)和repeating-radial-gradient(重复径向渐变)

1、重复径向渐变

图1

图1实现代码：

background: -webkit-repeating-radial-gradient(#ff0, #ff0 5px, #f00 5px, #f00 10px);

2、重复线性渐变

图2

图2实现代码：

background: -webkit-repeating-linear-gradient(top left, #ff0, #ff0 5px, #f00 5px, #f00 10px);

CSS渐变主要的应用就是制作简单的背景，一些按钮等效果

效果依次是：