HTML-CSS：颜色渐变

线性渐变

/*

            渐变不是一个新的属性, 而是一个取值

            默认情况下线性渐变是从上至下的渐变

            我们可以通过在颜色的前面添加to xxx修改渐变的方向

            to top

            to left

            to right

 */

            /*background-image: linear-gradient(to top right, red, blue);*/

            /*除了可以通过关键字控制渐变的方向以外, 还可以通过角度来控制渐变的方向, 角度是按照顺时针旋转*/

            /*background-image: linear-gradient(200deg, red, blue);*/

            /*30%以前不渐变, 从30%开始慢慢渐变到下一个颜色*/

            /*background-image: linear-gradient(red 30%, blue);*/

            /*background-image: linear-gradient(red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);*/

            background-image: linear-gradient(to left ,red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);

---

径向渐变

/*可以在颜色前面添加at和关键字来指定从什么位置开始渐变*/

            /*background-image: radial-gradient(at left top,red, blue);*/

            /*除了可以通过关键字指定从什么位置开始渐变以外, 还可以通过指定具体像素来指定从什么位置开始渐变*/

            /*background-image: radial-gradient(at 50px 50px,red, blue);*/

            /*也可以在颜色前面直接加上一个具体的像素来指定渐变的范围*/

            /*background-image: radial-gradient(150px ,red, blue);*/

            /*

            编写规范:

            如果既要指定扩散的范围, 又要指定起始位置, 那么把扩散的范围写在前面, 而起始位置写在后面

            */

            background-image: radial-gradient(50px at right bottom ,red, blue);