linear-gradient radical-gradient详解

线性渐变与径向渐变，挺好玩的两个属性值，不过挺复杂的，希望能捋清楚吧

1.linear-gradient

（1）基础用法

传两部分参数方向 + 颜色（颜色可填两个以上的值），方向可为to right / top / left / bottom（默认方向）/ top right / top left / bottom right / bottom left 以及角度等

【例1】默认值为botto

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 200px;height: 200px;background-image: linear-gradient(#ff7, #7f7, #77f );}</style>
</head>
<body><div></div>
</body>
</html>

【结果】

【例2】方向top right

div {width: 200px;height: 200px;background-image: linear-gradient(to top right, #ff7, #7f7, #77f );
}

【例3】方向值为角度

div {width: 200px;height: 200px;background-image: linear-gradient(90deg, #ff7, #7f7, #77f );
}

【结果】

（2）进阶用法

确定颜色的起止位置，在每个颜色后面添加像素参数

【例】

div {width: 300px;height: 100px;background-image: linear-gradient(90deg, #ff7 50px, #7f7 150px, #77f 200px);
}

【结果】在0-50px之间颜色值为 #ff7 ，50px开始过渡直至150px为 #7f7，150px过渡至200px，200px-300px颜色值为 #77f

2.radical-gradient

径向渐变

语法规则：radial-gradient(形状放射半径 at 圆心位置 , 颜色)

形状：circle / ellipse

放射半径：closest-corner / closest-side / farthest-corner / farthest-side

位置：（一个参数/两个参数）像素值 / 百分比 / left,right,top,bottom,center

颜色：颜色后也可添加起止位置，长度是相对于圆心计算，即放射点

【注】可以不填，但是属性值位置一定不能乱！！！

【例1】只填颜色

div {width: 200px;height: 200px;background-image: radial-gradient(#fff 0px, #ff7 30px, #000 90px);
}

【结果】

【例2】添加位置

div {width: 200px;height: 200px;background-image: radial-gradient(at 0px 0px, #fff, #ff7, #000);
}

【结果】

【例3】添加形状

ellipse

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse at 100px 50px, #fff, #ff7, #000);
}

【结果】

circle

div {width: 200px;height: 200px;background-image: radial-gradient(circle at 100px 50px, #fff, #ff7, #000);
}

【结果】

【例4】添加放射半径

closest-corner

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse closest-corner  at 80px 50px, #fff, #ff7, #000);
}

【结果】

closest-side

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse closest-side  at 80px 50px, #fff, #ff7, #000);
}

【结果】

farthest-corner

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse farthest-corner  at 80px 50px, #fff, #ff7, #000);
}

【结果】

farthest-side

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse farthest-side  at 80px 50px, #fff, #ff7, #000);
}

【结果】