CSS 渐变
CSS 定义了两种渐变类型:
-
- 线性渐变(向下/向上/向左/向右/对角线)
-
- 径向渐变(由其中心定义)
CSS 线性渐变
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 - 从上到下(默认)
#grad {
background-image: linear-gradient(red, yellow);
}
线性渐变 - 从左到右
#grad {
background-image: linear-gradient(to right, red , yellow);
}
线性渐变 - 对角线
可以通过指定水平和垂直起始位置来实现对角渐变。
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
使用角度
如果希望对渐变角度做更多的控制,可以定义一个角度,来取代预定义的方向(向下、向上、向右、向左、向右下等等)。值 0deg 等于向上(to top)。值 90deg 等于向右ÿ