线性渐变
基础用法 linear-gradient(渐变参与的颜色 多个颜色逗号隔开)
进阶用法 linear-gradient(渐变的方向, color1, color2....colorn)
渐变的方向 书写方式
to right 从左到右
to left 从右到左
to bottom 默认值
to right top 从左下角到右上角
还可以设置角度值 0deg = o度 90deg = 90度
0度就是12点钟方向的位置, 顺时针方向增加读书
渐变范围规定 linear-gradient(渐变的方向, color1 size1, color2 size2....colorn)
size 设置的是颜色变化的终点
渐变颜色默认起点是 0% 终点是 100%
径向渐变
基础用法 radial-gradient(color1 size1,color2 size)
完整用法
radial-gradient(
圆心的大小(xr yr) at 圆心位置(x,y),
color1 size1,
color2 size
)
线性渐变最终的颜色会蔓延到整个容器
径向渐变的圆心位置的变换原点在元素 的左上角
圆心位置的调整还可以支持关键词 left right center top right