线性渐变 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%）
