CSS 线性渐变（可实现：div对角线或斜线）

学习和了解线性渐变的起因是需要用css实现div对角线或者斜线，具体原型图如下：

1. 语法介绍

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变，你需要设置一个终点方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

background: linear-gradient(direction, 
	[length | percentage]color-stop1, [length | percentage]color-stop2, ...);

值	意义
direction	用角度值指定渐变的走向（或角度）
color-stop1, color-stop2,…	用于指定渐变的起止颜色
length	用长度值指定起止色位置，不允许负值
percentage	用百分比指定起止色位置

注意： 以下情况只在宽高相同时成立，建议使用走向描述如 to top left

• to top left：设置渐变为从右下到左上。相当于: 315deg
• to left：设置渐变为从右到左。相当于: 270deg
• to bottom left：设置渐变为从右上到左下。相当于: 225deg
• to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
• to bottom right：设置渐变为从左上到右下。相当于: 135deg
• to right：设置渐变从左到右。相当于: 90deg
• to top right：设置渐变为从右下到左上。相当于: 45deg
• to top：设置渐变从下到上。相当于: 0deg

2. 用线性渐变绘制斜线 请看示例

background: 
	linear-gradient(to bottom right,
    					transparent 0%,
    					transparent calc(50% - 1px),
    					#1069B2 50%,
    					transparent calc(50% + 1px),
    					transparent 100%
    				)

background: 
	linear-gradient(to top right,
    					transparent 0%,
    					transparent calc(50% - 1px),
    					#1069B2 50%,
    					transparent calc(50% + 1px),
    					transparent 100%
    				)

渐变与斜线对照表：

斜线方向	渐变方向1	渐变方向2
左上→右下 ↘	to top right	to bottom left
左下→右上 ↗	to top left	to bottom right

知识不分难易，有用便值得记忆。
我是迷心，只记有用知识的程序猿。