CSS Gradient详解
发布于 2016-03-07 01:49:08 | 191 次阅读 | 评论: 0 | 来源: 分享
CSS层叠样式表
CSS（层叠样式表） 即 级联样式表 。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
前言
现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十K的图片，这怎么行。。。
还好我们有CSS第三代！这次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。
兼容性
从
Gradient有几个子特性，下面一一列出。
线性渐变（linear-gradient）
语法如下：
linear-gradient() = linear-gradient(
[ | to ]?,
<color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
第一个参数指明了颜色渐变的方向：
- 可以是角度，比如0deg，表示正上方向，90deg表示向右（顺时针）
- 也可以是关键词，比如to top, to right, to bottom, to left, 分别对应了0deg, 90deg, 180deg, 270deg。当然也可以不指定，默认值是to bottom
第二个参数指明了颜色断点（即
所以，gradient line的长度计算公式是：
abs(W * sin(A)) + abs(H * cos(A))
A是角度，W是gradient box的宽，H为高
是不是看完有种然并卵的感觉：前端工程师哪里需要知道这些鬼啊。
非也非也，在开发UI的时候，清楚的知道浏览器原理，才能在脑中根据视觉稿正确的解构出CSS代码，否则只能在那里傻傻的试了又试。
这个例子还有个小技巧，Gradient中两个不同颜色间默认是渐变的，但如果我们需要做出图中这种颜色明显变化的效果（锐变），就可以用同一个位置不同颜色的方式实现。
更多例子可以在这里看 
简化版语法如下：
radial-gradient() = radial-gradient(
[ || ]? [ at ]? ,
<color-stop-list>
)
- position用来指定渐变圆心的位置，默认为center，
圆心没设置在中心是因为矩形的对角线相等且平分，所以closest-corner = farthest-corner，就没法比较差异了。
重复渐变（Repeating Gradients）
基本语法与上面的线性渐变和径向渐变类似，就是增加了重复的特性。
从
重复的规则简单说就是用最后一个颜色断点的位置减去第一个颜色断点位置的距离作为区间长度，不断的重复。比如repeating-linear-gradient(red 10px, blue 50px) 就相当于linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)
至于首尾颜色距离为0等特殊情况，这里就不细说 了，可以到
根据上面说的规则，这个例子里的区间长度是首尾颜色的位置之差，是20px。
我们可以验证下，两张图里都有约7个红白条，矩形宽高均100px，对角线则是约140px，140px/7=20px，bingo！
注：本文例子的代码在codepen可以查看
参考文章