关于渐变属性值的一些理解

首先，对于渐变（gradient）主要有两种方式，一种为线性渐变（linear-gradient），一种为径向渐（radical-gradient）
本篇着重讨论线性渐变。
渐变的语法：
background: linear-gradient(direction, color-stop1, color-stop2, …);
其中对于这个gradient轴也要有一定的了解（类似于弹性盒的主轴和副轴）
但重点是要了解，添加角度后的变化
0deg即是，从下至上，默认是180deg即从上至下。

下面是一些运用中的思考：

body div:nth-child(1)
{
	width: 200px;
	height: 200px;
	background: linear-gradient(red 25% ,blue 25%);
}

在bule后面再加入一个相同起点，不同颜色的属性，会造成其后来属性覆盖了前面相同位置的属性，如：

body div:nth-child(1)
{
	width: 200px;
	height: 200px;
	background: linear-gradient(red 25% ,blue 25%,green 25%);
}

但是如果改为此种

body div:nth-child(1)
{
	width: 200px;
	height: 200px;
	background: linear-gradient(red 25% ,blue 0%, blue 50%,green 0% ,green 50%);
}

红色块，蓝色块，不会被覆盖，会出现这种效果

如果按之前的理解，从0~50%中是为蓝色，会覆盖前面的红色，但结果并没有。这是一个很值得思考的问题。

下面就试着讨论一下这个问题，举一个简单的例子：
body div:nth-child(1)
{
width: 200px;
height: 200px;
background: linear-gradient(red 25% ,blue 0%, blue 50%);
}

很显然，如果没有中间的0%去‘调和’两端，那么，中间会出现25%的渐变区域，但现在没有出现，那么这个0%到底起到了什么作用在中间。其中的逻辑先行这样理解：
由于25%比0%大，则默认从0%到25%的这段里被红色占据，且这一规则后只需要再计算从25%到50%之间的颜色，即蓝色！

以下贴出来一些作品：（有一些小细节需要注意一下）
1.

分析一下这个图片，在不用div嵌套的情况下，写出该效果。
即，使用背景颜色写出，但要有一点需要注意。
background-size与background-image想呼应调整，着重区分下其与整个背景色background的区别。
此图即利用了该原理，使用一个size块，然后使其为一半的白色透明色（出现亮的效果，如果黑色透明色即为暗的效果），另一半与背景色块相同，即可出来此效果。
tips：别忘了加repeat这个属性值，不然达不到预期效果
其在给已存在背景色的块上，再需要蒙上一层颜色时候的作用十分优秀。

body div:nth-child(1)
{
	width: 200px;
	height: 200px;
	background: #00B6ED;
	background-size: 50px 50px;
	background-image: linear-gradient(rgba(255,255,255,0.3) 50%,#00B6ED 50%);
	background-repeat: no-repeat;
}

由此块可以延伸出很多经典图形
2.在基础上延伸一点的图形

body  div:nth-child(4)
{
	width: 200px;
	height: 200px;
	background: #00B6ED;
	background-size: 50px 50px;
	background-image:linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,  rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75% ,transparent 75%, transparent);
}/* 在第三个图形上加入透明与颜色之间鲜明的分隔线的样式  tips：注意对于image应看做50 50的方格对待*/
/* 相当于大块竖向分了四份,每一小份又分了四份，再调出想要的样式即可 */
/* 白透明 透明 白透明 透明 */

对于其整体旋转为部分旋转所组成