[分享]css两种渐变

CSS中有两种渐变，分别是线性渐变和径向渐变。

/* 线性渐变 */
background: linear-gradient(direction, color-stop1, color-stop2, ...);

/* 方向可以是角度、关键字或至少两个颜色值 */
background: linear-gradient(45deg, #ffefd5, #ffffff);
background: linear-gradient(to right bottom, #ffefd5, #ffffff);

/* 颜色值可以是RGBA、HSLA或16进制值 */
background: linear-gradient(to right, rgba(255, 239, 213, 0.8), #ffffff);

/* 颜色的个数没有限制，可以实现不同的效果 */
background: linear-gradient(to bottom, #666, #333, #000); 

线性渐变是指以一条直线为基础，从一种颜色渐变到另一种颜色。其中的关键字或度数用于指定渐变的方向，颜色值可以是RGB、HSL或者16进制。

而径向渐变是指从某一点向四周辐射着渐变，在CSS中可以通过径向渐变实现圆形、椭圆形等形状的背景。和线性渐变一样，径向渐变也可以选择颜色和方向。

/* 径向渐变 */
background: radial-gradient(shape size at position, start-color, ..., last-color);

/* 形状可以是圆形、椭圆形、长方形等 */
background: radial-gradient(circle, #ffefd5, #ffffff);

/* 尺寸可以是关键字或像素值 */
background: radial-gradient(circle at 50% 50%, #ffefd5, #ffffff);

/* 颜色值同样支持RGBA、HSLA和16进制值 */
background: radial-gradient(ellipse at center, rgba(255, 239, 213, 0.8), #ffffff); 

径向渐变可以在center、bottom、right等位置处放置不同颜色的圆，形成不同的背景。同时，也能实现不同尺寸、形状的径向渐变。