css 太极图案例带来的收获

基础知识

渐变：gradient 在两个或者多个颜色之间显示平稳过度。由浏览器生成。

线性渐变：line-gradient(过渡方向，初始颜色，结束颜色)。注意过渡方向默认从上到下。

1、支持多颜色渐变，多个值，就是从多个颜色之间过渡变化。

2、可以切换过渡的方向。to top,to left,to top left等等。

3、支持度数过渡（edg）。这个渐变可以从任意角度

径向渐变：radial-gradient(中心点，形状，大小，起始颜色，结束颜色)由一个点向四周的颜色渐变。

1、百分比过渡。

2、中心点的百分比，代表x轴、y轴的大小。代表中心点的位置。

3、size大小的值。closest-side:最近边；farthest-side:最远边；closest-corner:最近角；farthest-corner:最远角。

重复渐变：重复渐变在线性和径向渐变的基础上，加上repeating。在末尾加上百分比，代表在x%范围内执行一圈。

在回顾太极图案时，发现这些方法，在了解了原理之后，就非常简单了。