1.0 线性渐变 - 从上到下(默认)
从上到下是默认情况的渐变效果,所以只需要通过linear-gradient
来设置颜色即可!如果需要从下到上,咱们把颜色位置对调就好了!!!
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
2.0 线性渐变 - 从左到右:
在linear-gradient
里增加 to xxx方向
,即可控制渐变的方向,to 哪里就是到哪里去
#grad {
background-image: linear-gradient(to right, red , yellow);
}
2.0 线性渐变 - 对角:
这个相对比从左到右渐变知识增加了一个位置而已,一看就明白了
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}