线性渐变

从指定两头开始渐变的距离，渐变区间：20%~80%

当渐变区间无限小时，渐变就看起来像是一条线了，渐变区间：50%~50%

我们可以尝试缩小背景高度并让其重复(默认重复)，来获取条纹,条纹高度：15px

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小， 则该色标的位置值会被设置为它前面所有色标位置值的最大值, 这意味着如果我们把第二个色标的位置值设置为 0， 那它的位置就总是会被浏览器调整为前一个色标的位置值

我们可以利用这一点来简化代码，尤其是在创建多种颜色的渐变时

垂直条纹 使用to right 或者 90deg

斜向条纹45deg

斜向条纹60deg

斜向条纹2 45deg

适用于条纹的重复线性渐变优化斜向条纹 45deg

适用于条纹的重复线性渐变优化斜向条纹 60deg

适用于条纹的重复线性渐变优化斜向条纹 60deg 简化版

同色系条纹 -- 两种颜色

同色系条纹 -- 一种颜色，不同深浅

渐变绘制网格 -- 同一色系，两种颜色

渐变绘制网格 -- 同一颜色，不同深浅

径向渐变 -- 波点

径向渐变 -- 波点

棋盘1

棋盘2

棋盘3 -- svg

棋盘4 -- svg in style

背景与边框1

背景与边框2

背景与边框3

背景与边框4 -- 老式信封

背景与边框5 -- 老式信封

蚂蚁行军效果

边框的裁剪 -- 统的脚注