渐变1.线性渐变 linear-gradient 非重复性渐变 linear-gradient(to right,gol

一.线性渐变 linear-gradient

1.非重复性渐变
- linear-gradient(to right,gold 10%,skyblue 20%)
```
在0-10%插入黄色，在20%-100%插入蓝色
```
- linear-gradient(45deg,gold 10%,skyblue 10%,skyblue 20%, gold 20%)
```
在0-10%插入黄色，10%-20%为蓝色，20%-100%为黄色
```
2.重复性渐变：最后一个颜色的长度等于定义图片的整体长度，超过这个长度之后开始循环
- repeating-linear-gradient(45deg,gold 0,gold 10%,skyblue 10%,skyblue 20%)
  
  图片总长为20%

二.径向渐变

1.非重复性渐变

radial-gradient(at right bottom,gold 10%,skyblue 20%)

中心点在右下方，距离中心点10%放置黄色，20%放置蓝色，中间开始过渡

radial-gradient(gold 40px,skyblue 0/40px)

在距离中心点的40px处放置黄色，在40px处放置蓝色，没有过渡

radial-gradient(50px,gold,skyblue) ,百分比无效
```
从中心点的黄色过渡到50px处的蓝色
```

radial-gradient(100px 40px,gold,skyblue)

中心点的黄色过渡到蓝色； 
椭圆宽度的是100px，高度的是40px;

radial-gradient(100px 40px,gold 50%,skyblue 50%)

radial-gradient(100px 40px, gold 0, gold 60px, skyblue 60px)

椭圆宽度为100px，但此时`gold 60px`已经超过100px,总宽度以120px为准

2.重复性渐变
- repeating-radial-gradient(gold 0,gold 20px,skyblue 20px, skyblue 30px)
```
在0-20px处为黄色，20px-30px处为蓝色，总长为30px
```

三.repeating-linear/radial-gradient：自动补值

自动补值：重复性渐变，初始值不为0时会根据颜色的相差距离进行自动补值。
   [](https://w3c.github.io/csswg-drafts/css-images/#repeating-gradients)
   比如：
  ` repeating-linear-gradient(red 10px, blue 50px)` 
    is equivalent to
  ` linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)`

1.repeating-linear-gradient()

repeating-linear-gradient(90deg, gold 0, gold 10%, skyblue 20%)
```
0-10%为黄色，20%处放置蓝色，中间过渡
```

repeating-linear-gradient(90deg, gold 10%, skyblue 20%)

10%放置黄色，20%处放置蓝色，中间过渡；
0-10%自动补值(相差10%)：repeating-linear-gradient(90deg, `gold 0,skyblue 10%` gold 10%, skyblue 20%)

2.repeating-radial-gradient()

repeating-radial-gradient(gold 0, gold 10px, skyblue 60px)
```
0-10%处为黄色，60%处放置蓝色，中间过渡
```

repeating-radial-gradient( gold 10px, skyblue 60px)

10%处放置黄色，60%处放置蓝色，中间过渡；
0-10%自动补值(相差50px)：repeating-radial-gradient(`gold -40px,skyblue 10px`, gold 10px, skyblue 60px)