　　开篇词，建议熟悉 正则表达式的基础关键词，如: ?、+等，加深了解css的数据格式

linear-gradient

　　语法: linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list>)

如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程

<color-stop-list> 类型知识点	属性值写法
1、渐变颜色至少要两个颜色值	`linear-gradient(white, skyblue)`
2、位置值必须在颜色值后面	`linear-gradient(white, skyblue 30%, yellow 50%, green)`
3、可以不指定颜色的位置，不指定时，将按照颜色值个数进行等分	`linear-gradient(red, orange, yellow, green)`
4、起点颜色和终点颜色与相邻颜色一致时，则起点色值和终点色值可以省略	`linear-gradient(white, white 25%, skyblue 75%, skyblue)` 或 `linear-gradient(white 25%, skyblue 75%)`
5、渐变的断点位置可以是负数，也可以大于100%	`linear-gradient(white -25%, lightseagreen, skyblue 110%)`
6、在同一个渐变中，不同类型的断点位置值可以同时使用	`linear-gradient(white 100px, skyblue 50%)`
7、若存在多个渐变断点，前一个断点位置值大于后一个断点位置值。则后一个断点位置值会按前一个断点位置值计算	`linear-gradient(white 20px, lightseagreen 0px, skyblue 50%)`
8、渐变断点值支持一次性设置两个位置值	`linear-gradient(white 40%, skyblue 40% 60%, white 50%)`

<div class="least-two">渐变颜色至少两个值</div>
<div class="color-after">位置值必须在颜色值后面</div>
<div class="none-position">不指定位置值时，将按颜色值个数进行等分</div>
<div class="start-end">起点颜色和终点颜色与相邻颜色一致时，则 起点色值和终点色值可以省略</div>
<div class="none-limit-num">渐变断点位置可以为负数，也可以大于100%</div>
<div class="together">在同一个渐变中，不同类型的断点位置可以同时使用</div>
<div class="max-before">前一个断点位置值大于后一个断点位置值，后一个断点位置值以前一个断点位置值计算</div>
<div class="two-position">渐变断点值支持一次性设置两个位置值</div>
  
// css
<style>
div {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 20px;
  float: left;
  border: 1px solid gold;
}

.least-two {
  background-image: linear-gradient(white, skyblue);
}

.color-after {
  background-image: linear-gradient(white, skyblue 30%, yellow 50%, green);
}

.none-position {
  background-image: linear-gradient(red, orange, yellow, green);
}

.start-end {
  background-image: linear-gradient(white, white 25%, skyblue 75%, skyblue);
}

.none-limit-num {
  background-image: linear-gradient(white -50%, lightseagreen, skyblue 110%);
}

/* 50%比110px小，则蓝色断点 位置值为110px，前后断点一致 颜色急变 */
.together {
  background-image: linear-gradient(white 110px, skyblue 50%);
}

.max-before {
  background-image: linear-gradient(white 20px, lightseagreen 0px, skyblue 50%);
}

.two-position {
   /* 等同于： linear-gradient(white 40%, skyblue 40%, skyblue 60%, white 50%) */
  background-image: linear-gradient(white 40%, skyblue 40% 60%, white 50%);
}
</style>

repeating-linear-gradient

　　语法：repeating-linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+) 是线性渐变的重复表现形式。

<div class="repeating"></div>
// css
<style>
.repeating {
  width: 150px;
  height: 150px;
  border: 1px solid salmon;
  background-image: repeating-linear-gradient(lightseagreen, lightseagreen 10px, lightskyblue 10px 20px);
}
</style>

radial-gradient

　　radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list>)

数据结构	值
<ending-shape>	默认值：圆 circle, ellipse
<size>	径向渐变的半径默认值：终止于元素边框内边缘 <extent-keyword> \| <length [0,∞]> \|<length-percentage [0,∞]>{2}
<position>	默认值：正中央距离左上角x y两个方向的距离，指定圆中心位置
<color-stop-list>	参考 linear-gradient
<extent-keyword>	closest-corner \| closest-side \| farthest-corner \| farthest-side

<div class="radial-gradient">radial-gradient</div>
<div class="position">调整圆心范围-position</div>
<div class="keyword">调整渐变范围 extent-keyword</div>
<div class="length">调整渐变范围 length</div>
  
// css
<style>
div {
  float: left;
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 1px solid lightcoral;
}
.radial-gradient {
  background-image: radial-gradient(circle, red 1px, white 1px 20%, lightseagreen, lightskyblue);
}

.position {
  background-image: radial-gradient(at right 20px top 20px, red 1px, white 1px 20%, lightseagreen 40%, lightskyblue);
}

.keyword {
  background-image: radial-gradient(farthest-side at top 20px left 20px, red 1px, white 1px 20%, lightseagreen 20%, lightskyblue);
}

.length {
      background-image: radial-gradient(circle 100px at top 20px left 20px, red 1px, white 1px 20%, lightseagreen 20% 40%, red 40%, 99%, lightskyblue);
}
</style>

repeating-radial-gradient

conic-gradient

　　语法：conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> , <angular-color-stop-list> )

　　conic-gradient 锥形渐变主要由 3 部分组成：起始角度、中心位置、角渐变断点。具体语法: MDN语法参考

<div class="basic"></div>
<div class="pie-charts"></div>
<div class="cell"></div>

<style>
div {
  width: 100px;
  height: 100px;
  margin: 25px;
  float: left;
  border: 1px solid salmon;
}
.basic {
  background-image: conic-gradient(from 45deg at 30% 30%, red 40deg, orange 40deg 80deg, yellow 80deg 180deg, green 180deg 240deg, blue 240deg 300deg, cyan 300deg 330deg, purple 330deg);
}

.pie-charts {
  background-image: conic-gradient(lightseagreen 40deg, lightgreen 40deg 200deg, salmon 200deg);
  border-radius: 50%;
}

.cell {
  background-image: conic-gradient(#eee 90deg, transparent 90deg 180deg, #eee 180deg 270deg, transparent 270deg 0deg);
  background-size: 20px 20px;
}
</style>

repeating-conic-gradient

综合运用主要是结合 background-image和border-image属性。需要练习，推荐 b站前端小智，每天一个练习~~~

CSS3之渐变