CSS里如何实现颜色渐变
CSS里的颜色渐变分为线性渐变和径向渐变。
▶ 线性渐变是通过 background: linear-gradient 来实现的
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
例（从左至右渐变，颜色由 #000000 渐变至 #ffffff）
background: linear-gradient(to right, #000000, #ffffff);
通过 to right 来实现方向上的渐变
如果要实现从上到下的渐变，CSS代码如下：
background: linear-gradient(to bottom, #000000, #ffffff);
方向包括：
从左至右：to right
从右至左：to left
从上至下：to bottom
从下至上：to top
▶ 径向渐变是通过：background: radial-gradient 来实现的
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
参数说明：
shape确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
size定义渐变的大小，可能值：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
例（从内至外，颜色由 #000000 渐变至 #ffffff）
background: radial-gradient(circle, #000000, #ffffff);
我的笔记