一、线性渐变总结图
二、浏览器兼容性
- 点击查看兼容性
三、demo
3.1 语法
background/background-image: linear-gradient([<angle> | to <side-or-corner>], color-shop, ..., color-shop);
background/background-image: repeating-linear-gradient([<angle> | to <side-or-corner>], color-shop, ..., color-shop)
3.2 -webkit-linear-gradient demo
- 点击打开demo,结果如下图所示:
3.3 标准 linear-gradient demo
- 计算角度示例:
- 点击打开demo,结果如下图所示: