线性渐变

线性渐变 linear-gradient

渐变分4种

• 线性渐变
• 径向渐变
• 重复线性渐变
• 重复径向渐变
  重点学习线性渐变

概念

线性渐变 是指渐变的方向是呈直线型的渐变。

属性

只能给以下属性添加渐变

• backgroundImage
• background
  给backgroundColor添加没有效果

语法

background-image: linear-gradient(方向？，颜色 颜色开始的位置，颜色 颜色结束的位置，，，);

  div {
    width: 600px;
    height: 600px;
    background-image: linear-gradient(black,red);
  }

方向

• 系统内置方向 to top|to bottm|to left|to right|to right top 默认值是 to bottom
• 自定义方向 0deg或者1deg等

div {
    width: 100px;
    height: 100px;
    background-image: linear-gradient( to right top, black,red);
  }

颜色 开始的位置 ,颜色 结束的位置

• 颜色 red或者#000或者rgba等
• 开始位置（省略了 默认就是0） 单位是 px或者百分比（相对于自身的宽或者高）
• 结束的位置（省略了 默认就是百分100%）